<!DOCTYPE html>
<html lang="zh-CN">





<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/myblog/img/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="/myblog/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="TakCode Blog">
  <meta name="author" content="谢芃">
  <meta name="keywords" content="">
  <title>CSS学习笔记 - TakCode</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.1/css/all.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/mdbootstrap/4.13.0/css/mdb.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/3.0.1/github-markdown.min.css" />

<link rel="stylesheet" href="//at.alicdn.com/t/font_1067060_qzomjdt8bmp.css">



  <link  rel="stylesheet" href="/myblog/lib/prettify/tomorrow-night-eighties.min.css" />

<link  rel="stylesheet" href="/myblog/css/main.css" />


  <link defer rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />


<!-- 自定义样式保持在最底部 -->


<meta name="generator" content="Hexo 4.2.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/myblog/">&nbsp;<strong>TakCode</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/">首页</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/archives/">归档</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/categories/">分类</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/tags/">标签</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/about/">关于</a>
          </li>
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="view intro-2" id="background" parallax=true
         style="background: url('/myblog/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask rgba-black-light flex-center">
          <div class="container text-center white-text fadeInUp">
            <span class="h2" id="subtitle">
              
            </span>

            
              
                <p class="mt-3 post-meta">
                  <i class="fas fa-calendar-alt" aria-hidden="true"></i>
                  星期二, 三月 5日 2019, 8:09 晚上
                </p>
              

              <p class="mt-1">
                
                  
                  <span class="post-meta">
                    <i class="far fa-chart-bar"></i>
                    20.7k 字
                  </span>
                

                
                  
                  <span class="post-meta">
                      <i class="far fa-clock"></i>
                      76 分钟
                  </span>
                

                
              </p>
            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5 z-depth-3" id="board">
          <div class="post-content mx-auto" id="post">
            
            <div class="markdown-body">
              <p>CSS学习笔记</p>
<a id="more"></a>

<p><a href="http://helloxx.cn/CSS%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE.svg" target="_blank" rel="noopener">思维导图</a></p>
<h2 id="CSS层叠样式表"><a href="#CSS层叠样式表" class="headerlink" title="CSS层叠样式表"></a>CSS层叠样式表</h2><h3 id="学习目标"><a href="#学习目标" class="headerlink" title="学习目标"></a>学习目标</h3><ul>
<li>理解<ul>
<li>css的目的作用</li>
<li>css的三种引入方式</li>
</ul>
</li>
<li>应用<ul>
<li>css三种引用方式的书写</li>
<li>通过样式规则给标签添加简单的样式</li>
</ul>
</li>
</ul>
<h3 id="HTML的局限性"><a href="#HTML的局限性" class="headerlink" title="HTML的局限性"></a>HTML的局限性</h3><p>说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义， </p>
<p>比如<code>&lt;h1&gt;</code>表明这是一个大标题，用<code>&lt;p&gt;</code>表明这是一个段落，用<code>&lt;img&gt;</code>表明这儿有一个图片， 用<code>&lt;a&gt;</code>表示此处有链接。</p>
<p>很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点： <strong>丑</strong>。</p>
<p><strong>总结：</strong></p>
<ul>
<li>HTML满足不了设计者的需求</li>
<li>操作html属性不方便</li>
<li>HTML里面添加样式带来的是无尽的臃肿和繁琐</li>
</ul>
<h3 id="CSS-网页的美容师"><a href="#CSS-网页的美容师" class="headerlink" title="CSS 网页的美容师"></a>CSS 网页的美容师</h3><ul>
<li>让我们的网页更加丰富多彩，布局更加灵活自如。   </li>
<li>CSS的最大贡献就是：  让 HTML 从样式中脱离，  实现了 HTML 专注去做 结构呈现，样式交给css </li>
</ul>
<blockquote>
<p><strong>我们理想中的结果： 结构(html)与样式(css)相分离</strong></p>
</blockquote>
<p>CSS 做的很出色，如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师</p>
<h3 id="CSS初识"><a href="#CSS初识" class="headerlink" title="CSS初识"></a>CSS初识</h3><ul>
<li><p>概念：</p>
<p>​    CSS(Cascading Style Sheets)  ，通常称为CSS样式表或层叠样式表（级联样式表）</p>
</li>
<li><p>作用：</p>
<ul>
<li>主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。</li>
<li>CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。</li>
</ul>
</li>
</ul>
<h3 id="引入CSS样式表（书写位置）"><a href="#引入CSS样式表（书写位置）" class="headerlink" title="引入CSS样式表（书写位置）"></a>引入CSS样式表（书写位置）</h3><h4 id="行内式（内联样式）"><a href="#行内式（内联样式）" class="headerlink" title="行内式（内联样式）"></a>行内式（内联样式）</h4><ul>
<li><p>概念：</p>
<p>​    称行内样式、行间样式.</p>
<p>​    是通过标签的style属性来设置元素的样式</p>
</li>
</ul>
<ul>
<li>其基本语法格式如下：</li>
</ul>
<pre><code class="html">&lt;标签名 style=&quot;属性1:属性值1; 属性2:属性值2; 属性3:属性值3;&quot;&gt; 内容 &lt;/标签名&gt;</code></pre>
<p>实际上任何HTML标签都拥有style属性，用来设置行内式。</p>
<pre><code class="css">&lt;div style=&quot;color: red; font-size: 12px;&quot;&gt;青春不常在，抓紧谈恋爱&lt;/div&gt;</code></pre>
<ul>
<li>注意：<ul>
<li>style其实就是标签的属性</li>
<li>样式属性和值中间是<code>:</code></li>
<li>多组属性值之间用<code>;</code>隔开。</li>
<li>只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余</li>
</ul>
</li>
<li>缺点：<ul>
<li>没有实现样式和结构相分离</li>
</ul>
</li>
</ul>
<h4 id="内部样式表（内嵌样式表）"><a href="#内部样式表（内嵌样式表）" class="headerlink" title="内部样式表（内嵌样式表）"></a>内部样式表（内嵌样式表）</h4><ul>
<li><p>概念：</p>
<p>​    称内嵌式</p>
<p>​    是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义</p>
</li>
<li><p>其基本语法格式如下：</p>
</li>
</ul>
<pre><code class="html">&lt;head&gt;
&lt;style type=&quot;text/CSS&quot;&gt;
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
&lt;/style&gt;
&lt;/head&gt;</code></pre>
<pre><code class="css">&lt;style&gt;
     div {
         color: red;
         font-size: 12px;
     }
&lt;/style&gt;</code></pre>
<ul>
<li><p>注意：</p>
<ul>
<li>style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。</li>
<li>type=”text/css”  在html5中可以省略。</li>
<li>只能控制当前的页面</li>
</ul>
</li>
<li><p>缺点：</p>
<p>  没有彻底分离</p>
</li>
</ul>
<p>综合案例</p>
<pre><code class="html">&lt;style&gt;
    /*选择器{属性:值；}*/
    p {
        color:#06C; 
        font-size:14px;  
    }  /*文字的颜色是 蓝色*/
    h4 {
        color:#900;
    }
    h1 {
        color:#090; 
        font-size:16px; 
    }
    body { 
        background:url(bg2.jpg);
    }
&lt;/style&gt;</code></pre>
<p><strong>展示</strong><br><img src="http://helloxx.cn//d02.png" srcset="/myblog/img/loading.gif" style="zoom: 70%;" /></p>
<h4 id="外部样式表（外链式）"><a href="#外部样式表（外链式）" class="headerlink" title="外部样式表（外链式）"></a>外部样式表（外链式）</h4><ul>
<li><p>概念：</p>
<p>​    称链入式</p>
<p>​    是将所有的样式放在一个或多个以<strong>.CSS</strong>为扩展名的外部样式表文件中，</p>
<p>​    通过link标签将外部样式表文件链接到HTML文档中</p>
</li>
<li><p>其基本语法格式如下：</p>
</li>
</ul>
<pre><code class="html">&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css文件路径&quot;&gt;
&lt;/head&gt;</code></pre>
<ul>
<li>注意：  <ul>
<li>link 是个单标签</li>
<li>link标签需要放在head头部标签中，并且指定link标签的三个属性</li>
</ul>
</li>
</ul>
<table>
<thead>
<tr>
<th>属性</th>
<th align="left">作用</th>
</tr>
</thead>
<tbody><tr>
<td>rel</td>
<td align="left">定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。</td>
</tr>
<tr>
<td>type</td>
<td align="left">定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。我们都可以省略</td>
</tr>
<tr>
<td>href</td>
<td align="left">定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。</td>
</tr>
</tbody></table>
<h4 id="三种样式表总结（位置）"><a href="#三种样式表总结（位置）" class="headerlink" title="三种样式表总结（位置）"></a>三种样式表总结（位置）</h4><table>
<thead>
<tr>
<th>样式表</th>
<th>优点</th>
<th>缺点</th>
<th>使用情况</th>
<th>控制范围</th>
</tr>
</thead>
<tbody><tr>
<td>行内样式表</td>
<td>书写方便，权重高</td>
<td>没有实现样式和结构相分离</td>
<td>较少</td>
<td>控制一个标签（少）</td>
</tr>
<tr>
<td>内部样式表</td>
<td>部分结构和样式相分离</td>
<td>没有彻底分离</td>
<td>较多</td>
<td>控制一个页面（中）</td>
</tr>
<tr>
<td>外部样式表</td>
<td>完全实现结构和样式相分离</td>
<td>需要引入</td>
<td>最多，强烈推荐</td>
<td>控制整个站点（多）</td>
</tr>
</tbody></table>
<p>代码风格</p>
<ul>
<li>展开格式</li>
</ul>
<pre><code class="css">h3 {
    color: deeppink;
    font-size: 20px;    
}</code></pre>
<p>代码大小写</p>
<p>样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。</p>
<pre><code class="css">/* 推荐 */
h3{
    color: pink;
}</code></pre>
<h3 id="总结CSS样式规则"><a href="#总结CSS样式规则" class="headerlink" title="总结CSS样式规则"></a>总结CSS样式规则</h3><p>使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，</p>
<p><strong>总结：</strong></p>
<ol>
<li>选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。</li>
<li>属性和属性值以“键值对”的形式出现。</li>
<li>属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。</li>
<li>属性和属性值之间用英文“:”连接。</li>
<li>多个“键值对”之间用英文“;”进行区分。</li>
</ol>
<h1 id="CSS选择器（重点）"><a href="#CSS选择器（重点）" class="headerlink" title="CSS选择器（重点）"></a>CSS选择器（重点）</h1><p> 学习目标：</p>
<ul>
<li>理解<ul>
<li>能说出选择器的作用</li>
<li>id选择器和类选择器的区别</li>
</ul>
</li>
<li>应用<ul>
<li>能够使用基础选择器给页面元素添加样式</li>
</ul>
</li>
</ul>
<h2 id="CSS选择器作用（重点）"><a href="#CSS选择器作用（重点）" class="headerlink" title="CSS选择器作用（重点）"></a>CSS选择器作用（重点）</h2><h3 id="选择器的作用"><a href="#选择器的作用" class="headerlink" title="选择器的作用"></a>选择器的作用</h3><p>​    找到特定的HTML页面元素</p>
<blockquote>
<p>*<em>CSS选择器干啥的？   选择标签用的， 把我们想要的标签选择出来 *</em> </p>
</blockquote>
<p>css 就是 分两件事，选对人，做对事。 </p>
<pre><code class="css">h3 { 
    color: red;
}</code></pre>
<p>这段代码就是2件事， 把<code>h3</code>选出来， 然后 把它变成了红色。</p>
<p>选择器分为基础选择器 和 复合选择器，我们这里先讲解一下基础选择器。</p>
<h2 id="CSS基础选择器"><a href="#CSS基础选择器" class="headerlink" title="CSS基础选择器"></a>CSS基础选择器</h2><h3 id="标签选择器"><a href="#标签选择器" class="headerlink" title="标签选择器"></a>标签选择器</h3><ul>
<li><p>概念：</p>
<p>标签选择器（元素选择器）是指用<strong>HTML标签名</strong>称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。</p>
</li>
<li><p>语法：</p>
</li>
</ul>
<pre><code>标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } </code></pre><ul>
<li><p>作用：</p>
<p>标签选择器 可以把某一类标签<strong>全部</strong>选择出来  比如所有的<code>div</code>标签  和 所有的<code>span</code>标签</p>
</li>
<li><p>优点：</p>
<p>是能快速为页面中同类型的标签统一样式</p>
</li>
<li><p>缺点：</p>
<p>不能设计差异化样式。</p>
</li>
</ul>
<h3 id="类选择器"><a href="#类选择器" class="headerlink" title="类选择器"></a>类选择器</h3><p>类选择器使用 .（英文点号）进行标识，后面紧跟类名.</p>
<ul>
<li><p>语法：</p>
<ul>
<li>类名选择器</li>
</ul>
<pre><code>.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}</code></pre><ul>
<li>标签</li>
</ul>
<pre><code>&lt;p class=&#39;类名&#39;&gt;&lt;/p&gt;</code></pre></li>
<li><p>优点：</p>
<ul>
<li>可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 </li>
</ul>
</li>
<li><p>注意</p>
<ul>
<li>类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)</li>
<li>长名称或词组可以使用中横线来为选择器命名。</li>
<li>不要纯数字、中文等命名， 尽量使用英文字母来表示。</li>
</ul>
</li>
</ul>
<p><strong>案例：</strong></p>
<img src="http://helloxx.cn//d01.png" srcset="/myblog/img/loading.gif" style="zoom:50%;" />

<pre><code class="html">&lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;style&gt;

        .blue {
            color: blue;
            font-size: 100px;
        }
        .red {
            color: red;
            font-size: 100px;
        }
        .orange {
            color: orange;
            font-size: 100px;
        }
        .green {
            color: green;
            font-size: 100px;
        }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;span class=&quot;blue&quot;&gt;G&lt;/span&gt;
        &lt;span class=&quot;red&quot;&gt;o&lt;/span&gt;
        &lt;span class=&quot;orange&quot;&gt;o&lt;/span&gt;
        &lt;span class=&quot;blue&quot;&gt;g&lt;/span&gt;
        &lt;span class=&quot;green&quot;&gt;l&lt;/span&gt;
        &lt;span class=&quot;red&quot;&gt;e&lt;/span&gt;
    &lt;/body&gt;</code></pre>
<h3 id="类选择器特殊用法-多类名"><a href="#类选择器特殊用法-多类名" class="headerlink" title="类选择器特殊用法- 多类名"></a>类选择器特殊用法- 多类名</h3><p>我们可以给标签指定多个类名，从而达到更多的选择目的。</p>
<p>注意：</p>
<ul>
<li>各个类名中间用空格隔开。</li>
<li>多类名选择器在后期布局比较复杂的情况下，还是较多使用的。</li>
</ul>
<pre><code class="html">&lt;div class=&quot;pink fontWeight font20&quot;&gt;亚瑟&lt;/div&gt;
&lt;div class=&quot;font20&quot;&gt;刘备&lt;/div&gt;
&lt;div class=&quot;font14 pink&quot;&gt;安其拉&lt;/div&gt;
&lt;div class=&quot;font14&quot;&gt;貂蝉&lt;/div&gt;</code></pre>
<h3 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h3><p>id选择器使用<code>#</code>进行标识，后面紧跟id名</p>
<ul>
<li><p>其基本语法格式如下：</p>
<ul>
<li><p>id选择器</p>
<pre><code>#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</code></pre></li>
<li><p>标签</p>
<pre><code>&lt;p id=&quot;id名&quot;&gt;&lt;/p&gt;</code></pre></li>
</ul>
</li>
<li><p>元素的id值是唯一的，只能对应于文档中某一个具体的元素。</p>
</li>
<li><p>用法基本和类选择器相同。</p>
</li>
</ul>
<h4 id="id选择器和类选择器区别"><a href="#id选择器和类选择器区别" class="headerlink" title="id选择器和类选择器区别"></a>id选择器和类选择器区别</h4><ul>
<li>W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。</li>
<li>类选择器（class） 好比人的名字，  是可以多次重复使用的， 比如  张伟  王伟  李伟  李娜</li>
<li>id选择器     好比人的身份证号码，  全中国是唯一的， 不得重复。 只能使用一次。</li>
</ul>
<p><strong><em>id选择器和类选择器最大的不同在于 使用次数上。</em></strong></p>
<p><strong>总结</strong></p>
<ul>
<li>类选择器我们在修改样式中，用的最多。</li>
<li>id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript 搭配使用。</li>
</ul>
<h3 id="通配符选择器"><a href="#通配符选择器" class="headerlink" title="通配符选择器"></a>通配符选择器</h3><ul>
<li><p>概念</p>
<p>通配符选择器用<code>*</code>号表示，  *   就是 选择所有的标签      他是所有选择器中作用范围最广的，能匹配页面中所有的元素。</p>
</li>
<li><p>其基本语法格式如下：</p>
</li>
</ul>
<pre><code>* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</code></pre><p>例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。</p>
<pre><code class="css">* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}</code></pre>
<ul>
<li><p>注意：</p>
<pre><code>  会匹配页面所有的元素，降低页面响应速度，不建议随便使用</code></pre></li>
</ul>
<h3 id="基础选择器总结"><a href="#基础选择器总结" class="headerlink" title="基础选择器总结"></a>基础选择器总结</h3><table>
<thead>
<tr>
<th>选择器</th>
<th>作用</th>
<th>缺点</th>
<th>使用情况</th>
<th>用法</th>
</tr>
</thead>
<tbody><tr>
<td>标签选择器</td>
<td>可以选出所有相同的标签，比如p</td>
<td>不能差异化选择</td>
<td>较多</td>
<td>p { color：red;}</td>
</tr>
<tr>
<td>类选择器</td>
<td>可以选出1个或者多个标签</td>
<td>可以根据需求选择</td>
<td>非常多</td>
<td>.nav { color: red; }</td>
</tr>
<tr>
<td>id选择器</td>
<td>一次只能选择器1个标签</td>
<td>只能使用一次</td>
<td>不推荐使用</td>
<td>#nav {color: red;}</td>
</tr>
<tr>
<td>通配符选择器</td>
<td>选择所有的标签</td>
<td>选择的太多，有部分不需要</td>
<td>不推荐使用</td>
<td>* {color: red;}</td>
</tr>
</tbody></table>
<p>基础选择器我们一共学了4个，  每个都有自己的价值， 可能再某个地方都能用到。但是如果说，一定要找个最常用的，那么，肯定是类选择器。</p>
<h3 id="团队约定"><a href="#团队约定" class="headerlink" title="团队约定"></a>团队约定</h3><p>选择器</p>
<ul>
<li>尽量少用通用选择器 <code>*</code></li>
<li>尽量少用 ID 选择器</li>
<li>不使用无具体语义定义的标签选择器 div span </li>
</ul>
<pre><code>/* 推荐 */
.jdc {}
li {}
p{}

/* 不推荐 */
*{}
#jdc {}
div{}   因为div 没有语义，我们尽量少用</code></pre><h1 id="CSS文字文本样式"><a href="#CSS文字文本样式" class="headerlink" title="CSS文字文本样式"></a>CSS文字文本样式</h1><p> 目标</p>
<ul>
<li>应用<ul>
<li>使用css字体样式完成对字体的设置</li>
<li>使用css外观属性给页面元素添加样式</li>
<li>使用常用的emment语法</li>
<li>能够使用开发人员工具代码调试</li>
</ul>
</li>
</ul>
<h2 id="font字体"><a href="#font字体" class="headerlink" title="font字体"></a>font字体</h2><h3 id="font-size-大小"><a href="#font-size-大小" class="headerlink" title="font-size:大小"></a>font-size:大小</h3><ul>
<li><p>作用：</p>
<p>font-size属性用于设置字号</p>
</li>
</ul>
<pre><code class="css">p {  
    font-size:20px; 
}</code></pre>
<ul>
<li><p>单位：</p>
<ul>
<li>可以使用相对长度单位，也可以使用绝对长度单位。</li>
<li>相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。</li>
</ul>
</li>
</ul>
<table>
<thead>
<tr>
<th>相对长度单位</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>em</td>
<td>相对于当前对象内文本的字体尺寸</td>
</tr>
<tr>
<td>px</td>
<td>像素，最常用，推荐使用</td>
</tr>
<tr>
<td><strong>绝对长度单位</strong></td>
<td></td>
</tr>
<tr>
<td>in</td>
<td>英寸</td>
</tr>
<tr>
<td>cm</td>
<td>厘米</td>
</tr>
<tr>
<td>mm</td>
<td>毫米</td>
</tr>
<tr>
<td>pt</td>
<td>点</td>
</tr>
</tbody></table>
<p><strong>注意：</strong></p>
<ul>
<li>我们文字大小以后，基本就用px了，其他单位很少使用</li>
<li>谷歌浏览器默认的文字大小为16px</li>
<li>但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小</li>
</ul>
<h3 id="font-family-字体"><a href="#font-family-字体" class="headerlink" title="font-family:字体"></a>font-family:字体</h3><ul>
<li><p>作用：</p>
<p>font-family属性用于设置哪一种字体。</p>
</li>
</ul>
<pre><code>p{ font-family:&quot;微软雅黑&quot;;}</code></pre><ul>
<li>网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑</li>
<li>可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准。</li>
</ul>
<pre><code>p{font-family: Arial,&quot;Microsoft Yahei&quot;, &quot;微软雅黑&quot;;}</code></pre><blockquote>
<p>常用技巧：</p>
<ol>
<li>各种字体之间必须使用英文状态下的逗号隔开。</li>
<li>中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。</li>
<li>如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。</li>
<li>尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。</li>
</ol>
</blockquote>
<h4 id="CSS-Unicode字体"><a href="#CSS-Unicode字体" class="headerlink" title="CSS Unicode字体"></a>CSS Unicode字体</h4><ul>
<li><p>为什么使用 Unicode字体</p>
<ul>
<li>在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。</li>
<li>xp 系统不支持 类似微软雅黑的中文。</li>
</ul>
</li>
<li><p>解决：</p>
<ul>
<li><p>方案一： 你可以使用英文来替代。 比如<code>font-family:&quot;Microsoft Yahei&quot;</code>。</p>
</li>
<li><p>方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。</p>
<pre><code>font-family: &quot;\5FAE\8F6F\96C5\9ED1&quot;;   表示设置字体为“微软雅黑”。</code></pre></li>
</ul>
</li>
</ul>
<table>
<thead>
<tr>
<th>字体名称</th>
<th>英文名称</th>
<th>Unicode 编码</th>
</tr>
</thead>
<tbody><tr>
<td>宋体</td>
<td>SimSun</td>
<td>\5B8B\4F53</td>
</tr>
<tr>
<td>新宋体</td>
<td>NSimSun</td>
<td>\65B0\5B8B\4F53</td>
</tr>
<tr>
<td>黑体</td>
<td>SimHei</td>
<td>\9ED1\4F53</td>
</tr>
<tr>
<td>微软雅黑</td>
<td>Microsoft YaHei</td>
<td>\5FAE\8F6F\96C5\9ED1</td>
</tr>
<tr>
<td>楷体_GB2312</td>
<td>KaiTi_GB2312</td>
<td>\6977\4F53_GB2312</td>
</tr>
<tr>
<td>隶书</td>
<td>LiSu</td>
<td>\96B6\4E66</td>
</tr>
<tr>
<td>幼园</td>
<td>YouYuan</td>
<td>\5E7C\5706</td>
</tr>
<tr>
<td>华文细黑</td>
<td>STXihei</td>
<td>\534E\6587\7EC6\9ED1</td>
</tr>
<tr>
<td>细明体</td>
<td>MingLiU</td>
<td>\7EC6\660E\4F53</td>
</tr>
<tr>
<td>新细明体</td>
<td>PMingLiU</td>
<td>\65B0\7EC6\660E\4F53</td>
</tr>
</tbody></table>
<p>为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体</p>
<h3 id="font-weight-字体粗细"><a href="#font-weight-字体粗细" class="headerlink" title="font-weight:字体粗细"></a>font-weight:字体粗细</h3><ul>
<li>在html中如何将字体加粗我们可以用标签来实现<ul>
<li>使用 b  和 strong 标签是文本加粗。</li>
</ul>
</li>
<li>可以使用CSS 来实现，但是CSS 是没有语义的。</li>
</ul>
<table>
<thead>
<tr>
<th>属性值</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td>normal</td>
<td align="left">默认值（不加粗的）</td>
</tr>
<tr>
<td>bold</td>
<td align="left">定义粗体（加粗的）</td>
</tr>
<tr>
<td>100~900</td>
<td align="left">400 等同于 normal，而 700 等同于 bold  我们重点记住这句话</td>
</tr>
</tbody></table>
<p>提倡：</p>
<p>  我们平时更喜欢用数字来表示加粗和不加粗。</p>
<h3 id="font-style-字体风格"><a href="#font-style-字体风格" class="headerlink" title="font-style:字体风格"></a>font-style:字体风格</h3><ul>
<li>在html中如何将字体倾斜我们可以用标签来实现<ul>
<li>字体倾斜除了用 i  和 em 标签，</li>
</ul>
</li>
<li>可以使用CSS 来实现，但是CSS 是没有语义的</li>
</ul>
<p>font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th align="left">作用</th>
</tr>
</thead>
<tbody><tr>
<td>normal</td>
<td align="left">默认值，浏览器会显示标准的字体样式  font-style: normal;</td>
</tr>
<tr>
<td>italic</td>
<td align="left">浏览器会显示斜体的字体样式。</td>
</tr>
</tbody></table>
<p>平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。</p>
<h3 id="font-综合设置字体样式-重点"><a href="#font-综合设置字体样式-重点" class="headerlink" title="font:综合设置字体样式 (重点)"></a>font:综合设置字体样式 (重点)</h3><p>font属性用于对字体样式进行综合设置</p>
<ul>
<li>基本语法格式如下：</li>
</ul>
<pre><code class="css">选择器 { font: font-style  font-weight  font-size/line-height  font-family;}</code></pre>
<ul>
<li>注意：<ul>
<li>使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以<strong>空格</strong>隔开。</li>
<li>其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。</li>
</ul>
</li>
</ul>
<h3 id="font总结"><a href="#font总结" class="headerlink" title="font总结"></a>font总结</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">表示</th>
<th align="left">注意点</th>
</tr>
</thead>
<tbody><tr>
<td align="left">font-size</td>
<td align="left">字号</td>
<td align="left">我们通常用的单位是px 像素，一定要跟上单位</td>
</tr>
<tr>
<td align="left">font-family</td>
<td align="left">字体</td>
<td align="left">实际工作中按照团队约定来写字体</td>
</tr>
<tr>
<td align="left">font-weight</td>
<td align="left">字体粗细</td>
<td align="left">记住加粗是 700 或者 bold  不加粗 是 normal 或者  400  记住数字不要跟单位</td>
</tr>
<tr>
<td align="left">font-style</td>
<td align="left">字体样式</td>
<td align="left">记住倾斜是 italic     不倾斜 是 normal  工作中我们最常用 normal</td>
</tr>
<tr>
<td align="left">font</td>
<td align="left">字体连写</td>
<td align="left">1. 字体连写是有顺序的  不能随意换位置 2. 其中字号 和 字体 必须同时出现</td>
</tr>
</tbody></table>
<h2 id="CSS外观属性"><a href="#CSS外观属性" class="headerlink" title="CSS外观属性"></a>CSS外观属性</h2><h3 id="color-文本颜色"><a href="#color-文本颜色" class="headerlink" title="color:文本颜色"></a>color:文本颜色</h3><ul>
<li><p>作用：</p>
<p>color属性用于定义文本的颜色，</p>
</li>
<li><p>其取值方式有如下3种：</p>
</li>
</ul>
<table>
<thead>
<tr>
<th align="left">表示表示</th>
<th align="left">属性值</th>
</tr>
</thead>
<tbody><tr>
<td align="left">预定义的颜色值</td>
<td align="left">red，green，blue，还有我们的御用色 pink</td>
</tr>
<tr>
<td align="left">十六进制</td>
<td align="left">#FF0000，#FF6600，#29D794</td>
</tr>
<tr>
<td align="left">RGB代码</td>
<td align="left">rgb(255,0,0)或rgb(100%,0%,0%)</td>
</tr>
</tbody></table>
<ul>
<li><p>注意</p>
<p>我们实际工作中， 用 16进制的写法是最多的，而且我们更喜欢简写方式比如  #f00 代表红色</p>
</li>
</ul>
<h3 id="text-align-文本水平对齐方式"><a href="#text-align-文本水平对齐方式" class="headerlink" title="text-align:文本水平对齐方式"></a>text-align:文本水平对齐方式</h3><ul>
<li><p>作用：</p>
<p>text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性</p>
</li>
<li><p>其可用属性值如下：</p>
</li>
</ul>
<table>
<thead>
<tr>
<th>属性</th>
<th align="center">解释</th>
</tr>
</thead>
<tbody><tr>
<td>left</td>
<td align="center">左对齐（默认值）</td>
</tr>
<tr>
<td>right</td>
<td align="center">右对齐</td>
</tr>
<tr>
<td>center</td>
<td align="center">居中对齐</td>
</tr>
</tbody></table>
<ul>
<li><p>注意：</p>
<p>是让盒子里面的内容水平居中， 而不是让盒子居中对齐</p>
</li>
</ul>
<h3 id="line-height-行间距"><a href="#line-height-行间距" class="headerlink" title="line-height:行间距"></a>line-height:行间距</h3><ul>
<li><p>作用：</p>
<p>line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。</p>
</li>
<li><p>单位：</p>
<ul>
<li>line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px</li>
</ul>
</li>
<li><p>技巧：</p>
</li>
</ul>
<pre><code>一般情况下，行距比字号大7.8像素左右就可以了。
line-height: 24px;</code></pre><h3 id="text-indent-首行缩进"><a href="#text-indent-首行缩进" class="headerlink" title="text-indent:首行缩进"></a>text-indent:首行缩进</h3><ul>
<li><p>作用：</p>
<p>text-indent属性用于设置首行文本的缩进，</p>
</li>
<li><p>属性值</p>
<ul>
<li>其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,</li>
<li>建议使用em作为设置单位。</li>
</ul>
</li>
</ul>
<p><strong>1em 就是一个字的宽度   如果是汉字的段落， 1em 就是一个汉字的宽度</strong></p>
<pre><code class="css">p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }</code></pre>
<h3 id="text-decoration-文本的装饰"><a href="#text-decoration-文本的装饰" class="headerlink" title="text-decoration 文本的装饰"></a>text-decoration 文本的装饰</h3><p>text-decoration   通常我们用于给链接修改装饰效果</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>none</td>
<td>默认。定义标准的文本。 取消下划线（最常用）</td>
</tr>
<tr>
<td>underline</td>
<td>定义文本下的一条线。下划线 也是我们链接自带的（常用）</td>
</tr>
<tr>
<td>overline</td>
<td>定义文本上的一条线。（不用）</td>
</tr>
<tr>
<td>line-through</td>
<td>定义穿过文本下的一条线。（不常用）</td>
</tr>
</tbody></table>
<h3 id="CSS外观属性总结"><a href="#CSS外观属性总结" class="headerlink" title="CSS外观属性总结"></a>CSS外观属性总结</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">表示</th>
<th align="left">注意点</th>
</tr>
</thead>
<tbody><tr>
<td align="left">color</td>
<td align="left">颜色</td>
<td align="left">我们通常用  十六进制   比如 而且是简写形式 #fff</td>
</tr>
<tr>
<td align="left">line-height</td>
<td align="left">行高</td>
<td align="left">控制行与行之间的距离</td>
</tr>
<tr>
<td align="left">text-align</td>
<td align="left">水平对齐</td>
<td align="left">可以设定文字水平的对齐方式</td>
</tr>
<tr>
<td align="left">text-indent</td>
<td align="left">首行缩进</td>
<td align="left">通常我们用于段落首行缩进2个字的距离   text-indent: 2em;</td>
</tr>
<tr>
<td align="left">text-decoration</td>
<td align="left">文本修饰</td>
<td align="left">记住 添加 下划线  underline  取消下划线  none</td>
</tr>
</tbody></table>
<h2 id="sublime快捷操作emmet语法"><a href="#sublime快捷操作emmet语法" class="headerlink" title="sublime快捷操作emmet语法"></a>sublime快捷操作emmet语法</h2><p>Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。</p>
<ol>
<li><p>生成标签 直接输入标签名 按tab键即可   比如  div   然后tab 键， 就可以生成 <div></div></p>
</li>
<li><p>如果想要生成多个相同标签  加上 * 就可以了 比如   div*3  就可以快速生成3个div</p>
</li>
<li><p>如果有父子级关系的标签，可以用 &gt;  比如   ul &gt; li就可以了</p>
</li>
<li><p>如果有兄弟关系的标签，用  +  就可以了 比如 div+p  </p>
</li>
<li><p>如果生成带有类名或者id名字的，  直接写  .demo  或者  #two   tab 键就可以了</p>
</li>
<li><p>如果生成的div 类名是有顺序的， 可以用 自增符号  $     </p>
<pre><code>.demo$*3        
&lt;div class=&quot;demo1&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;demo2&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;demo3&quot;&gt;&lt;/div&gt;</code></pre></li>
</ol>
<h2 id="CSS-第二天"><a href="#CSS-第二天" class="headerlink" title="CSS 第二天"></a>CSS 第二天</h2><p>今天我们围绕一个 导航栏案例进行学习知识点。</p>
<p>今日重点：</p>
<ul>
<li>复合选择器<ul>
<li>后代选择器</li>
<li>并集选择器</li>
</ul>
</li>
<li>标签显示模式</li>
<li>CSS背景<ul>
<li>背景位置</li>
</ul>
</li>
<li>CSS三大特性<ul>
<li>优先级</li>
</ul>
</li>
</ul>
<h3 id="CSS复合选择器"><a href="#CSS复合选择器" class="headerlink" title="CSS复合选择器"></a>CSS复合选择器</h3><p> 目标</p>
<ul>
<li><p>理解</p>
<ul>
<li>理解css复合选择器分别的应用场景</li>
</ul>
</li>
<li><p>应用</p>
<ul>
<li>使用后代选择器给元素添加样式</li>
<li>使用并集选择器给元素添加样式</li>
<li>使用伪类选择器</li>
</ul>
</li>
</ul>
<p><strong>为什么要学习css复合选择器</strong></p>
<p>  CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。</p>
<ul>
<li>目的是为了可以选择更准确更精细的目标元素标签。</li>
<li>复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的</li>
</ul>
<h4 id="后代选择器（重点）"><a href="#后代选择器（重点）" class="headerlink" title="后代选择器（重点）"></a>后代选择器（重点）</h4><ul>
<li><p>概念：</p>
<p>后代选择器又称为包含选择器</p>
</li>
<li><p>作用：</p>
<p>用来选择元素或元素组的<strong>子孙后代</strong></p>
</li>
<li><p>其写法就是把外层标签写在前面，内层标签写在后面，中间用<strong>空格</strong>分隔，先写父亲爷爷，在写儿子孙子。 </p>
</li>
</ul>
<pre><code>父级 子级{属性:属性值;属性:属性值;}</code></pre><ul>
<li>语法：</li>
</ul>
<pre><code>.class h3{color:red;font-size:16px;}</code></pre><ul>
<li>当标签发生嵌套时，内层标签就成为外层标签的后代。</li>
<li>子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。</li>
</ul>
<h4 id="子元素选择器"><a href="#子元素选择器" class="headerlink" title="子元素选择器"></a>子元素选择器</h4><ul>
<li><p>作用：</p>
<p>子元素选择器只能选择作为某元素<strong>子元素(亲儿子)</strong>的元素。</p>
</li>
<li><p>其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 <code>&gt;</code> 进行连接</p>
</li>
<li><p>语法：</p>
</li>
</ul>
<pre><code>.class&gt;h3{color:red;font-size:14px;}</code></pre><blockquote>
<p>这里的子 指的是 亲儿子  不包含孙子 重孙子之类。</p>
</blockquote>
<p>白话：  </p>
<pre><code> 比如：  .demo &gt; h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。</code></pre><h4 id="交集选择器"><a href="#交集选择器" class="headerlink" title="交集选择器"></a>交集选择器</h4><ul>
<li><p>条件</p>
<p>交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。</p>
</li>
<li><p>语法：</p>
<pre><code>h3.one {color:red; font-size:25px}</code></pre></li>
<li><p>其中第一个为标签选择器，第二个为class选择器，两个选择器之间<strong>不能有空格</strong>，如h3.special。</p>
</li>
</ul>
<p><strong>记忆技巧：</strong></p>
<p>交集选择器 是 并且的意思。  即…又…的意思</p>
<pre><code>比如：   p.one   选择的是： 类名为 .one  的 段落标签。  </code></pre><p>用的相对来说比较少，不太建议使用。</p>
<h4 id="并集选择器（重点）"><a href="#并集选择器（重点）" class="headerlink" title="并集选择器（重点）"></a>并集选择器（重点）</h4><ul>
<li>应用：<ul>
<li>如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。</li>
</ul>
</li>
<li>并集选择器（CSS选择器分组）是各个选择器通过<code>,</code>连接而成的，通常用于集体声明。</li>
<li>语法：</li>
</ul>
<pre><code>.one,h3 {color:red; font-size:25px}</code></pre><ul>
<li><p>任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。</p>
</li>
<li><p>记忆技巧：</p>
<p>并集选择器通常用于集体声明  ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。</p>
</li>
</ul>
<pre><code>比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。  </code></pre><p>测试题</p>
<pre><code class="html"> &lt;!-- 主导航栏 --&gt;
&lt;div class=&quot;nav&quot;&gt;   
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;公司首页&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;公司简介&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;公司产品&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;联系我们&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;!-- 侧导航栏 --&gt;
&lt;div class=&quot;sitenav&quot;&gt;    
  &lt;div class=&quot;site-l&quot;&gt;左侧侧导航栏&lt;/div&gt;
  &lt;div class=&quot;site-r&quot;&gt;&lt;a href=&quot;#&quot;&gt;登录&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
<p>在不修改以上结构代码的前提下，完成以下任务：</p>
<ol>
<li>链接 登录 的颜色为红色</li>
<li>主导航栏里面的所有的链接改为橙色    </li>
<li>主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。</li>
</ol>
<h4 id="链接伪类选择器（重点）"><a href="#链接伪类选择器（重点）" class="headerlink" title="链接伪类选择器（重点）"></a>链接伪类选择器（重点）</h4><p>伪类选择器：</p>
<p>为了和我们刚才学的类选择器相区别<br>类选择器是一个点 比如 .demo {}<br>而我们的伪类 就是 冒号  比如  :link{}   </p>
<p>作用：</p>
<p>用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。</p>
<p>因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。</p>
<pre><code class="css">a:link      /* 未访问的链接 */
a:visited   /* 已访问的链接 */
a:hover     /* 鼠标移动到链接上 */
a:active    /* 选定的链接 */</code></pre>
<p>  <strong>注意</strong></p>
<ul>
<li>写的时候，他们的顺序尽量不要颠倒  按照  lvha 的顺序。否则可能引起错误。     </li>
<li>因为叫链接伪类，所以都是 利用交集选择器  a:link    a:hover  </li>
<li>因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。</li>
<li>实际工作开发中，我们很少写全四个状态，一般我们写法如下：</li>
</ul>
<pre><code class="css">a {   /* a是标签选择器  所有的链接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
            color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}</code></pre>
<h4 id="复合选择器总结"><a href="#复合选择器总结" class="headerlink" title="复合选择器总结"></a>复合选择器总结</h4><table>
<thead>
<tr>
<th>选择器</th>
<th>作用</th>
<th>特征</th>
<th>使用情况</th>
<th>隔开符号及用法</th>
</tr>
</thead>
<tbody><tr>
<td>后代选择器</td>
<td>用来选择元素后代</td>
<td>是选择所有的子孙后代</td>
<td>较多</td>
<td>符号是<strong>空格</strong> .nav a</td>
</tr>
<tr>
<td>子代选择器</td>
<td>选择 最近一级元素</td>
<td>只选亲儿子</td>
<td>较少</td>
<td>符号是<strong>&gt;</strong>   .nav&gt;p</td>
</tr>
<tr>
<td>交集选择器</td>
<td>选择两个标签交集的部分</td>
<td>既是 又是</td>
<td>较少</td>
<td><strong>没有符号</strong>  p.one</td>
</tr>
<tr>
<td>并集选择器</td>
<td>选择某些相同样式的选择器</td>
<td>可以用于集体声明</td>
<td>较多</td>
<td>符号是<strong>逗号</strong> .nav, .header</td>
</tr>
<tr>
<td>链接伪类选择器</td>
<td>给链接更改状态</td>
<td></td>
<td>较多</td>
<td>重点记住 a{} 和 a:hover  实际开发的写法</td>
</tr>
</tbody></table>
<h3 id="标签显示模式（display）重点"><a href="#标签显示模式（display）重点" class="headerlink" title="标签显示模式（display）重点"></a>标签显示模式（display）重点</h3><p>目标：</p>
<ul>
<li>理解<ul>
<li>标签的三种显示模式</li>
<li>三种显示模式的特点以及区别</li>
<li>理解三种显示模式的相互转化</li>
</ul>
</li>
<li>应用<ul>
<li>实现三种显示模式的相互转化</li>
</ul>
</li>
</ul>
<h4 id="什么是标签显示模式"><a href="#什么是标签显示模式" class="headerlink" title="什么是标签显示模式"></a>什么是标签显示模式</h4><ul>
<li><p>什么是标签的显示模式？</p>
<p>标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个</p>
</li>
<li><p>作用： </p>
<p>我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。</p>
</li>
<li><p>标签的类型(分类)</p>
<p>HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。</p>
</li>
</ul>
<h4 id="块级元素-block-level"><a href="#块级元素-block-level" class="headerlink" title="块级元素(block-level)"></a>块级元素(block-level)</h4><ul>
<li>例：</li>
</ul>
<pre><code>常见的块元素有&lt;h1&gt;~&lt;h6&gt;、&lt;p&gt;、&lt;div&gt;、&lt;ul&gt;、&lt;ol&gt;、&lt;li&gt;等，其中&lt;div&gt;标签是最典型的块元素。</code></pre><p><img src="http://helloxx.cn//d03.png" srcset="/myblog/img/loading.gif" alt=""></p>
<ul>
<li>块级元素的特点</li>
</ul>
<p>（1）比较霸道，自己独占一行</p>
<p>（2）高度，宽度、外边距以及内边距都可以控制。</p>
<p>（3）宽度默认是容器（父级宽度）的100%</p>
<p>（4）是一个容器及盒子，里面可以放行内或者块级元素。</p>
<ul>
<li>注意：<ul>
<li>只有 文字才 能组成段落  因此 p  里面不能放块级元素，特别是 p 不能放div </li>
<li>同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。</li>
</ul>
</li>
</ul>
<h4 id="行内元素-inline-level"><a href="#行内元素-inline-level" class="headerlink" title="行内元素(inline-level)"></a>行内元素(inline-level)</h4><ul>
<li>例：</li>
</ul>
<pre><code>常见的行内元素有&lt;a&gt;、&lt;strong&gt;、&lt;b&gt;、&lt;em&gt;、&lt;i&gt;、&lt;del&gt;、&lt;s&gt;、&lt;ins&gt;、&lt;u&gt;、&lt;span&gt;等，其中&lt;span&gt;标签最典型的行内元素。有的地方也成内联元素</code></pre><p><img src="http://helloxx.cn//d04.png" srcset="/myblog/img/loading.gif" alt=""></p>
<ul>
<li>行内元素的特点：</li>
</ul>
<p>（1）相邻行内元素在一行上，一行可以显示多个。</p>
<p>（2）高、宽直接设置是无效的。</p>
<p>（3）默认宽度就是它本身内容的宽度。</p>
<p>（4）<strong>行内元素只能容纳文本或则其他行内元素。</strong></p>
<p>注意：</p>
<ul>
<li>链接里面不能再放链接。</li>
<li>特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。</li>
</ul>
<h4 id="行内块元素（inline-block）"><a href="#行内块元素（inline-block）" class="headerlink" title="行内块元素（inline-block）"></a>行内块元素（inline-block）</h4><ul>
<li>例：</li>
</ul>
<pre><code>在行内元素中有几个特殊的标签——&lt;img /&gt;、&lt;input /&gt;、&lt;td&gt;，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。</code></pre><p><img src="http://helloxx.cn//d05.png" srcset="/myblog/img/loading.gif" alt=""></p>
<ul>
<li><p>行内块元素的特点：</p>
<p>（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个<br>（2）默认宽度就是它本身内容的宽度。<br>（3）高度，行高、外边距以及内边距都可以控制。</p>
</li>
</ul>
<h4 id="三种模式总结区别"><a href="#三种模式总结区别" class="headerlink" title="三种模式总结区别"></a>三种模式总结区别</h4><table>
<thead>
<tr>
<th>元素模式</th>
<th>元素排列</th>
<th>设置样式</th>
<th>默认宽度</th>
<th>包含</th>
</tr>
</thead>
<tbody><tr>
<td>块级元素</td>
<td>一行只能放一个块级元素</td>
<td>可以设置宽度高度</td>
<td>容器的100%</td>
<td>容器级可以包含任何标签</td>
</tr>
<tr>
<td>行内元素</td>
<td>一行可以放多个行内元素</td>
<td>不可以直接设置宽度高度</td>
<td>它本身内容的宽度</td>
<td>容纳文本或则其他行内元素</td>
</tr>
<tr>
<td>行内块元素</td>
<td>一行放多个行内块元素</td>
<td>可以设置宽度和高度</td>
<td>它本身内容的宽度</td>
<td></td>
</tr>
</tbody></table>
<h4 id="标签显示模式转换-display"><a href="#标签显示模式转换-display" class="headerlink" title="标签显示模式转换 display"></a>标签显示模式转换 display</h4><ul>
<li>块转行内：display:inline;</li>
<li>行内转块：display:block;</li>
<li>块、行内元素转换为行内块： display: inline-block;</li>
</ul>
<h3 id="行高那些事（line-height）"><a href="#行高那些事（line-height）" class="headerlink" title="行高那些事（line-height）"></a>行高那些事（line-height）</h3><p>目标</p>
<ul>
<li>理解<ul>
<li>能说出 行高  和 高度  三种关系</li>
<li>能简单理解为什么行高等于高度单行文字会垂直居中</li>
</ul>
</li>
<li>应用<ul>
<li>使用行高实现单行文字垂直居中</li>
<li>能会测量行高</li>
</ul>
</li>
</ul>
<h4 id="行高测量"><a href="#行高测量" class="headerlink" title="行高测量"></a>行高测量</h4><p>行高的测量方法：</p>
<img src="http://helloxx.cn//d06.png" srcset="/myblog/img/loading.gif" style="zoom:50%;" />

<h4 id="单行文本垂直居中"><a href="#单行文本垂直居中" class="headerlink" title="单行文本垂直居中"></a>单行文本垂直居中</h4><p> 行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。</p>
<blockquote>
<p><strong>文字的行高等于盒子的高度。</strong></p>
</blockquote>
<p>这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。</p>
<p>行高   =  上距离 +  内容高度  + 下距离 </p>
<p> <img src="http://helloxx.cn//d07.png" srcset="/myblog/img/loading.gif" alt=""></p>
<p>上距离和下距离总是相等的，因此文字看上去是垂直居中的。</p>
<p><strong>行高和高度的三种关系</strong></p>
<ul>
<li>如果 行高 等于 高度  文字会 垂直居中</li>
<li>如果行高 大于 高度   文字会 偏下 </li>
<li>如果行高小于高度   文字会  偏上 </li>
</ul>
<h3 id="CSS-背景-background"><a href="#CSS-背景-background" class="headerlink" title="CSS 背景(background)"></a>CSS 背景(background)</h3><p>目标</p>
<ul>
<li>理解<ul>
<li>背景的作用</li>
<li>css背景图片和插入图片的区别</li>
</ul>
</li>
<li>应用<ul>
<li>通过css背景属性，给页面元素添加背景样式</li>
<li>能设置不同的背景图片位置</li>
</ul>
</li>
</ul>
<h4 id="背景颜色-color"><a href="#背景颜色-color" class="headerlink" title="背景颜色(color)"></a>背景颜色(color)</h4><ul>
<li><p>语法：</p>
<pre><code>background-color:颜色值;   默认的值是 transparent  透明的</code></pre></li>
</ul>
<h4 id="背景图片-image"><a href="#背景图片-image" class="headerlink" title="背景图片(image)"></a>背景图片(image)</h4><ul>
<li>语法： </li>
</ul>
<pre><code class="css">background-image : none | url (url) </code></pre>
<table>
<thead>
<tr>
<th>参数</th>
<th align="center">作用</th>
</tr>
</thead>
<tbody><tr>
<td>none</td>
<td align="center">无背景图（默认的）</td>
</tr>
<tr>
<td>url</td>
<td align="center">使用绝对或相对地址指定背景图像</td>
</tr>
</tbody></table>
<pre><code class="css">background-image : url(images/demo.png);</code></pre>
<ul>
<li>小技巧：  我们提倡 背景图片后面的地址，url不要加引号。</li>
</ul>
<h4 id="背景平铺（repeat）"><a href="#背景平铺（repeat）" class="headerlink" title="背景平铺（repeat）"></a>背景平铺（repeat）</h4><ul>
<li>语法： </li>
</ul>
<pre><code class="css">background-repeat : repeat | no-repeat | repeat-x | repeat-y </code></pre>
<table>
<thead>
<tr>
<th>参数</th>
<th align="center">作用</th>
</tr>
</thead>
<tbody><tr>
<td>repeat</td>
<td align="center">背景图像在纵向和横向上平铺（默认的）</td>
</tr>
<tr>
<td>no-repeat</td>
<td align="center">背景图像不平铺</td>
</tr>
<tr>
<td>repeat-x</td>
<td align="center">背景图像在横向上平铺</td>
</tr>
<tr>
<td>repeat-y</td>
<td align="center">背景图像在纵向平铺</td>
</tr>
</tbody></table>
<h4 id="背景位置-position-重点"><a href="#背景位置-position-重点" class="headerlink" title="背景位置(position) 重点"></a>背景位置(position) 重点</h4><ul>
<li>语法： </li>
</ul>
<pre><code class="css">background-position : length || length

background-position : position || position </code></pre>
<table>
<thead>
<tr>
<th>参数</th>
<th align="center">值</th>
</tr>
</thead>
<tbody><tr>
<td>length</td>
<td align="center">百分数 | 由浮点数字和单位标识符组成的长度值</td>
</tr>
<tr>
<td>position</td>
<td align="center">top | center | bottom | left | center | right   方位名词</td>
</tr>
</tbody></table>
<ul>
<li>注意：<ul>
<li>必须先指定background-image属性</li>
<li>position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。</li>
<li>如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left  top和top  left效果一致</li>
<li>如果只指定了一个方位名词，另一个值默认居中对齐。</li>
<li>如果position 后面是精确坐标， 那么第一个，肯定是 x  第二的一定是y</li>
<li>如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中</li>
<li>如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标</li>
</ul>
</li>
</ul>
<p><strong>实际工作用的最多的，就是背景图片居中对齐了。</strong></p>
<p>练习1：</p>
<p>背景大图</p>
<p>练习2：</p>
<p>小图片在盒子左侧垂直居中</p>
<h4 id="背景附着"><a href="#背景附着" class="headerlink" title="背景附着"></a>背景附着</h4><ul>
<li><p>背景附着就是解释背景是滚动的还是固定的</p>
</li>
<li><p>语法： </p>
<pre><code class="】">background-attachment : scroll | fixed </code></pre>
</li>
</ul>
<table>
<thead>
<tr>
<th>参数</th>
<th align="center">作用</th>
</tr>
</thead>
<tbody><tr>
<td>scroll</td>
<td align="center">背景图像是随对象内容滚动</td>
</tr>
<tr>
<td>fixed</td>
<td align="center">背景图像固定</td>
</tr>
</tbody></table>
<h4 id="背景简写"><a href="#背景简写" class="headerlink" title="背景简写"></a>背景简写</h4><ul>
<li>background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：</li>
<li>background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;</li>
<li>语法：</li>
</ul>
<pre><code class="css">background: transparent url(image.jpg) repeat-y  scroll center top ;</code></pre>
<h4 id="背景透明-CSS3"><a href="#背景透明-CSS3" class="headerlink" title="背景透明(CSS3)"></a>背景透明(CSS3)</h4><ul>
<li>语法：</li>
</ul>
<pre><code class="css">background: rgba(0, 0, 0, 0.3);</code></pre>
<ul>
<li>最后一个参数是alpha 透明度  取值范围 0~1之间</li>
<li>我们习惯把0.3 的 0 省略掉  这样写  background: rgba(0, 0, 0, .3);</li>
<li>注意：  背景半透明是指盒子背景半透明， 盒子里面的内容不受影响</li>
<li>因为是CSS3 ，所以 低于 ie9 的版本是不支持的。</li>
</ul>
<h4 id="背景总结"><a href="#背景总结" class="headerlink" title="背景总结"></a>背景总结</h4><table>
<thead>
<tr>
<th>属性</th>
<th align="left">作用</th>
<th align="left">值</th>
</tr>
</thead>
<tbody><tr>
<td>background-color</td>
<td align="left">背景颜色</td>
<td align="left">预定义的颜色值/十六进制/RGB代码</td>
</tr>
<tr>
<td>background-image</td>
<td align="left">背景图片</td>
<td align="left">url(图片路径)</td>
</tr>
<tr>
<td>background-repeat</td>
<td align="left">是否平铺</td>
<td align="left">repeat/no-repeat/repeat-x/repeat-y</td>
</tr>
<tr>
<td>background-position</td>
<td align="left">背景位置</td>
<td align="left">length/position    分别是x  和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法</td>
</tr>
<tr>
<td>background-attachment</td>
<td align="left">背景固定还是滚动</td>
<td align="left">scroll/fixed</td>
</tr>
<tr>
<td>背景简写</td>
<td align="left">更简单</td>
<td align="left">背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;  他们没有顺序</td>
</tr>
<tr>
<td>背景透明</td>
<td align="left">让盒子半透明</td>
<td align="left">background: rgba(0,0,0,0.3);   后面必须是 4个值</td>
</tr>
</tbody></table>
<h3 id="CSS-三大特性"><a href="#CSS-三大特性" class="headerlink" title="CSS 三大特性"></a>CSS 三大特性</h3><p>目标：</p>
<ul>
<li>理解<ul>
<li>能说出css样式冲突采取的原则</li>
<li>能说出那些常见的样式会有继承</li>
</ul>
</li>
<li>应用<ul>
<li>能写出CSS优先级的算法</li>
<li>能会计算常见选择器的叠加值</li>
</ul>
</li>
</ul>
<h4 id="CSS层叠性"><a href="#CSS层叠性" class="headerlink" title="CSS层叠性"></a>CSS层叠性</h4><ul>
<li><p>概念：</p>
<p>所谓层叠性是指多种CSS样式的叠加。</p>
<p>是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉</p>
</li>
<li><p>原则：</p>
<ul>
<li>样式冲突，遵循的原则是<strong>就近原则。</strong> 那个样式离着结构近，就执行那个样式。</li>
<li>样式不冲突，不会层叠</li>
</ul>
</li>
</ul>
<pre><code>CSS层叠性最后的执行口诀：  长江后浪推前浪，前浪死在沙滩上。</code></pre><h4 id="CSS继承性"><a href="#CSS继承性" class="headerlink" title="CSS继承性"></a>CSS继承性</h4><ul>
<li><p>概念：</p>
<p>子标签会继承父标签的某些样式，如文本颜色和字号。</p>
<p> 想要设置一个可继承的属性，只需将它应用于父元素即可。</p>
</li>
</ul>
<p>简单的理解就是：  子承父业。</p>
<ul>
<li><strong>注意</strong>：<ul>
<li>恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。</li>
<li>子元素可以继承父元素的样式（<strong>text-，font-，line-这些元素开头的可以继承，以及color属性</strong>）</li>
</ul>
</li>
</ul>
<pre><code>CSS继承性口诀：  龙生龙，凤生凤，老鼠生的孩子会打洞。</code></pre><h4 id="CSS优先级（重点）"><a href="#CSS优先级（重点）" class="headerlink" title="CSS优先级（重点）"></a>CSS优先级（重点）</h4><ul>
<li><p>概念：</p>
<p>定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，</p>
<ul>
<li>选择器相同，则执行层叠性</li>
<li>选择器不同，就会出现优先级的问题。</li>
</ul>
</li>
</ul>
<h5 id="权重计算公式"><a href="#权重计算公式" class="headerlink" title="权重计算公式"></a>权重计算公式</h5><p>关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）</p>
<table>
<thead>
<tr>
<th>标签选择器</th>
<th>计算权重公式</th>
</tr>
</thead>
<tbody><tr>
<td>继承或者 *</td>
<td>0,0,0,0</td>
</tr>
<tr>
<td>每个元素（标签选择器）</td>
<td>0,0,0,1</td>
</tr>
<tr>
<td>每个类，伪类</td>
<td>0,0,1,0</td>
</tr>
<tr>
<td>每个ID</td>
<td>0,1,0,0</td>
</tr>
<tr>
<td>每个行内样式 style=””</td>
<td>1,0,0,0</td>
</tr>
<tr>
<td>每个!important  重要的</td>
<td>∞ 无穷大</td>
</tr>
</tbody></table>
<ul>
<li>值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。 </li>
<li>关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）</li>
<li>div {<pre><code>color: pink!important;  </code></pre>}</li>
</ul>
<h5 id="权重叠加"><a href="#权重叠加" class="headerlink" title="权重叠加"></a>权重叠加</h5><p>我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。</p>
<p>就是一个简单的加法计算</p>
<ul>
<li><p>div ul  li   ——&gt;      0,0,0,3</p>
</li>
<li><p>.nav ul li   ——&gt;      0,0,1,2</p>
</li>
<li><p>a:hover      —–—&gt;   0,0,1,1</p>
</li>
<li><p>.nav a       ——&gt;      0,0,1,1</p>
<p>注意： </p>
</li>
</ul>
<ol>
<li>数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。</li>
</ol>
<h5 id="继承的权重是0"><a href="#继承的权重是0" class="headerlink" title="继承的权重是0"></a>继承的权重是0</h5><p>这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。</p>
<p>1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。<br>2） 如果没有选中，那么权重是0，因为继承的权重为0.</p>
<h3 id="CSS注释"><a href="#CSS注释" class="headerlink" title="CSS注释"></a>CSS注释</h3><p><strong>CSS注释规则：</strong></p>
<pre><code>/*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 &quot;/*&quot; 标记开始注释，在内容的结尾使用 &quot;*/&quot;结束。</code></pre><p>   例如：</p>
<pre><code class="css">p {
 /* 所有的字体是14像素大小*/
  font-size: 14px;                 
}</code></pre>
<h2 id="盒子模型（CSS重点）"><a href="#盒子模型（CSS重点）" class="headerlink" title="盒子模型（CSS重点）"></a>盒子模型（CSS重点）</h2><p>css学习三大重点： css 盒子模型   、  浮动  、  定位  </p>
<p>目标： </p>
<ul>
<li>理解：<ul>
<li>能说出盒子模型有那四部分组成</li>
<li>能说出内边距的作用以及对盒子的影响</li>
<li>能说出padding设置不同数值个数分别代表的意思</li>
<li>能说出块级盒子居中对齐需要的2个条件</li>
<li>能说出外边距合并的解决方法</li>
</ul>
</li>
<li>应用：<ul>
<li>能利用边框复合写法给元素添加边框</li>
<li>能计算盒子的实际大小</li>
<li>能利用盒子模型布局模块案例</li>
</ul>
</li>
</ul>
<h3 id="看透网页布局的本质"><a href="#看透网页布局的本质" class="headerlink" title="看透网页布局的本质"></a>看透网页布局的本质</h3><p>网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？</p>
<ul>
<li>看透网页布局的本质：<ul>
<li>首先利用CSS设置好盒子的大小，然后摆放盒子的位置。</li>
<li>最后把网页元素比如文字图片等等，放入盒子里面。</li>
<li>以上两步 就是网页布局的本质</li>
</ul>
</li>
</ul>
<p><img src="http://helloxx.cn//d14.png" srcset="/myblog/img/loading.gif" alt=""></p>
<p>我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白 这个盒子有什么特点。</p>
<h3 id="盒子模型（Box-Model）"><a href="#盒子模型（Box-Model）" class="headerlink" title="盒子模型（Box Model）"></a>盒子模型（Box Model）</h3><ul>
<li><p>所谓盒子模型：</p>
<ul>
<li>就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。</li>
</ul>
<p><img src="http://helloxx.cn//d08.png" srcset="/myblog/img/loading.gif" alt=""></p>
<p>总结：</p>
<ul>
<li>盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。</li>
</ul>
</li>
</ul>
<ul>
<li>盒子里面的文字和图片等元素是 内容区域<ul>
<li>盒子的厚度 我们成为 盒子的边框 </li>
<li>盒子内容与边框的距离是内边距（类似单元格的 cellpadding)</li>
<li>盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）</li>
</ul>
</li>
</ul>
<p><strong>标准盒子模型</strong></p>
<p> <img src="http://helloxx.cn//d09.png" srcset="/myblog/img/loading.gif" alt=""></p>
<h3 id="盒子边框（border）"><a href="#盒子边框（border）" class="headerlink" title="盒子边框（border）"></a>盒子边框（border）</h3><ul>
<li>语法：</li>
</ul>
<pre><code class="css">border : border-width || border-style || border-color </code></pre>
<table>
<thead>
<tr>
<th>属性</th>
<th align="center">作用</th>
</tr>
</thead>
<tbody><tr>
<td>border-width</td>
<td align="center">定义边框粗细，单位是px</td>
</tr>
<tr>
<td>border-style</td>
<td align="center">边框的样式</td>
</tr>
<tr>
<td>border-color</td>
<td align="center">边框颜色</td>
</tr>
</tbody></table>
<ul>
<li>边框的样式：<ul>
<li>none：没有边框即忽略所有边框的宽度（默认值）</li>
<li>solid：边框为单实线(最为常用的)</li>
<li>dashed：边框为虚线  </li>
<li>dotted：边框为点线</li>
</ul>
</li>
</ul>
<h4 id="边框综合设置"><a href="#边框综合设置" class="headerlink" title="边框综合设置"></a>边框综合设置</h4><pre><code>border : border-width || border-style || border-color </code></pre><p>例如：</p>
<pre><code class="css"> border: 1px solid red;  没有顺序  </code></pre>
<h4 id="盒子边框写法总结表"><a href="#盒子边框写法总结表" class="headerlink" title="盒子边框写法总结表"></a>盒子边框写法总结表</h4><p>很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。</p>
<table>
<thead>
<tr>
<th align="left">上边框</th>
<th align="left">下边框</th>
<th align="left">左边框</th>
<th align="left">右边框</th>
</tr>
</thead>
<tbody><tr>
<td align="left">border-top-style:样式;</td>
<td align="left">border-bottom-style:样式;</td>
<td align="left">border-left-style:样式;</td>
<td align="left">border-right-style:样式;</td>
</tr>
<tr>
<td align="left">border-top-width:宽度;</td>
<td align="left">border- bottom-width:宽度;</td>
<td align="left">border-left-width:宽度;</td>
<td align="left">border-right-width:宽度;</td>
</tr>
<tr>
<td align="left">border-top-color:颜色;</td>
<td align="left">border- bottom-color:颜色;</td>
<td align="left">border-left-color:颜色;</td>
<td align="left">border-right-color:颜色;</td>
</tr>
<tr>
<td align="left">border-top:宽度 样式 颜色;</td>
<td align="left">border-bottom:宽度 样式 颜色;</td>
<td align="left">border-left:宽度 样式 颜色;</td>
<td align="left">border-right:宽度 样式 颜色;</td>
</tr>
</tbody></table>
<h4 id="表格的细线边框"><a href="#表格的细线边框" class="headerlink" title="表格的细线边框"></a>表格的细线边框</h4><p> <img src="http://helloxx.cn//d10.png" srcset="/myblog/img/loading.gif" alt=""></p>
<ul>
<li><p>通过表格的<code>cellspacing=&quot;0&quot;</code>,将单元格与单元格之间的距离设置为0，</p>
</li>
<li><p>但是两个单元格之间的边框会出现重叠，从而使边框变粗</p>
</li>
<li><p>通过css属性：</p>
<pre><code>table{ border-collapse:collapse; }  </code></pre><ul>
<li>collapse 单词是合并的意思</li>
<li>border-collapse:collapse; 表示相邻边框合并在一起。</li>
</ul>
</li>
</ul>
<pre><code class="css">&lt;style&gt;
    table {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    td {
        border: 1px solid red;
        text-align: center;
    }
    table, td {
        border-collapse: collapse;  /*合并相邻边框*/
    }
&lt;/style&gt;</code></pre>
<p> <img src="http://helloxx.cn//d11.png" srcset="/myblog/img/loading.gif" alt=""></p>
<h3 id="内边距（padding）"><a href="#内边距（padding）" class="headerlink" title="内边距（padding）"></a>内边距（padding）</h3><h4 id="内边距："><a href="#内边距：" class="headerlink" title="内边距："></a>内边距：</h4><p>​    padding属性用于设置内边距。 <strong>是指 边框与内容之间的距离。</strong></p>
<h4 id="设置"><a href="#设置" class="headerlink" title="设置"></a>设置</h4><table>
<thead>
<tr>
<th>属性</th>
<th align="left">作用</th>
</tr>
</thead>
<tbody><tr>
<td>padding-left</td>
<td align="left">左内边距</td>
</tr>
<tr>
<td>padding-right</td>
<td align="left">右内边距</td>
</tr>
<tr>
<td>padding-top</td>
<td align="left">上内边距</td>
</tr>
<tr>
<td>padding-bottom</td>
<td align="left">下内边距</td>
</tr>
</tbody></table>
<p>当我们给盒子指定padding值之后， 发生了2件事情：</p>
<ol>
<li><p>内容和边框 有了距离，添加了内边距。</p>
</li>
<li><p>盒子会变大了。</p>
<p><strong>注意：  后面跟几个数值表示的意思是不一样的。</strong></p>
</li>
</ol>
<p>我们分开写有点麻烦，我们可以不可以简写呢？</p>
<table>
<thead>
<tr>
<th>值的个数</th>
<th>表达意思</th>
</tr>
</thead>
<tbody><tr>
<td>1个值</td>
<td>padding：上下左右内边距;</td>
</tr>
<tr>
<td>2个值</td>
<td>padding: 上下内边距    左右内边距 ；</td>
</tr>
<tr>
<td>3个值</td>
<td>padding：上内边距   左右内边距   下内边距；</td>
</tr>
<tr>
<td>4个值</td>
<td>padding: 上内边距 右内边距 下内边距 左内边距 ； 顺时针</td>
</tr>
</tbody></table>
<p><strong>课堂一练：</strong></p>
<p>请写出如下内边距：</p>
<ol>
<li>要求盒子有一个左边内边距是 5像素</li>
<li>要求简写的形式写出  一个盒子上下是 25像素   左右是15像素。</li>
<li>要求简写的形式写出 一个盒子  上内边距是 12像素  下内边距是 0  左内边距是 25像素  右内边距是 10像素</li>
</ol>
<h4 id="内盒尺寸计算（元素实际大小）"><a href="#内盒尺寸计算（元素实际大小）" class="headerlink" title="内盒尺寸计算（元素实际大小）"></a>内盒尺寸计算（元素实际大小）</h4><ul>
<li><p>宽度</p>
<p>Element Height = content height + padding + border （Height为内容高度）</p>
</li>
<li><p>高度</p>
<p> Element Width = content width + padding + border （Width为内容宽度）</p>
</li>
<li><p>盒子的实际的大小 =   内容的宽度和高度 +  内边距   +  边框   </p>
</li>
</ul>
<h4 id="内边距产生的问题"><a href="#内边距产生的问题" class="headerlink" title="内边距产生的问题"></a>内边距产生的问题</h4><ul>
<li><p>问题</p>
<p>会撑大原来的盒子</p>
</li>
<li><p>解决：</p>
<p>通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小</p>
</li>
</ul>
<p><strong>课堂一练</strong></p>
<ol>
<li>一个盒子宽度为100， padding为 10， 边框为5像素，问这个盒子实际的宽度的是（）</li>
</ol>
<ul>
<li><input checked="" disabled="" type="checkbox"> <p>(A) 130</p>
</li>
<li><input disabled="" type="checkbox"> <p>(B) 135 </p>
</li>
<li><input disabled="" type="checkbox"> <p>(C) 125</p>
</li>
<li><input disabled="" type="checkbox"> <p>(D) 115</p>
<p>100 +  20 + 10 </p>
</li>
</ul>
<ol start="2">
<li>关于根据下列代码计算 盒子宽高下列说法正确的是（）</li>
</ol>
<pre><code class="css">div {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
    border-top: 5px solid blue;
    padding: 50px;
    padding-left: 100px;
}</code></pre>
<ul>
<li><input disabled="" type="checkbox"> (A) 宽度为200px 高度为200px</li>
<li><input checked="" disabled="" type="checkbox"> (B) 宽度为352px 高度为306px</li>
<li><input disabled="" type="checkbox"> (C) 宽度为302px 高度为307px</li>
<li><input disabled="" type="checkbox"> (D) 宽度为302px 高度为252px</li>
</ul>
<p>w  200 +   150   + 2   =  352</p>
<p>h   200 +  100 +  6   =  306 </p>
<h4 id="padding不影响盒子大小情况"><a href="#padding不影响盒子大小情况" class="headerlink" title="padding不影响盒子大小情况"></a>padding不影响盒子大小情况</h4><blockquote>
<p>如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。</p>
</blockquote>
<h3 id="外边距（margin）"><a href="#外边距（margin）" class="headerlink" title="外边距（margin）"></a>外边距（margin）</h3><h4 id="外边距"><a href="#外边距" class="headerlink" title="外边距"></a>外边距</h4><p>​    margin属性用于设置外边距。  margin就是控制<strong>盒子和盒子之间的距离</strong></p>
<h4 id="设置-1"><a href="#设置-1" class="headerlink" title="设置"></a>设置</h4><table>
<thead>
<tr>
<th>属性</th>
<th align="left">作用</th>
</tr>
</thead>
<tbody><tr>
<td>margin-left</td>
<td align="left">左外边距</td>
</tr>
<tr>
<td>margin-right</td>
<td align="left">右外边距</td>
</tr>
<tr>
<td>margin-top</td>
<td align="left">上外边距</td>
</tr>
<tr>
<td>margin-bottom</td>
<td align="left">下外边距</td>
</tr>
</tbody></table>
<p>margin值的简写 （复合写法）代表意思  跟 padding 完全相同。</p>
<h4 id="块级盒子水平居中"><a href="#块级盒子水平居中" class="headerlink" title="块级盒子水平居中"></a>块级盒子水平居中</h4><ul>
<li>可以让一个块级盒子实现水平居中必须：<ul>
<li>盒子必须指定了宽度（width）</li>
<li>然后就给<strong>左右的外边距都设置为auto</strong>，</li>
</ul>
</li>
</ul>
<p>实际工作中常用这种方式进行网页布局，示例代码如下：</p>
<pre><code class="css">.header{ width:960px; margin:0 auto;}</code></pre>
<p>常见的写法，以下下三种都可以。</p>
<ul>
<li>margin-left: auto;   margin-right: auto;</li>
<li>margin: auto;</li>
<li>margin: 0 auto;</li>
</ul>
<h4 id="文字居中和盒子居中区别"><a href="#文字居中和盒子居中区别" class="headerlink" title="文字居中和盒子居中区别"></a>文字居中和盒子居中区别</h4><ol>
<li>盒子内的文字水平居中是  text-align: center,  而且还可以让 行内元素和行内块居中对齐</li>
<li>块级盒子水平居中  左右margin 改为 auto </li>
</ol>
<pre><code class="css">text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */</code></pre>
<h4 id="插入图片和背景图片区别"><a href="#插入图片和背景图片区别" class="headerlink" title="插入图片和背景图片区别"></a>插入图片和背景图片区别</h4><ol>
<li>插入图片 我们用的最多 比如产品展示类  移动位置只能靠盒模型 padding margin</li>
<li>背景图片我们一般用于小图标背景 或者 超大背景图片  背景图片 只能通过  background-position</li>
</ol>
<pre><code class="css"> img {  
        width: 200px;/* 插入图片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入当图片也是一个盒子 */
    }

 div {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
        background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
    }</code></pre>
<h4 id="清除元素的默认内外边距-重要"><a href="#清除元素的默认内外边距-重要" class="headerlink" title="清除元素的默认内外边距(重要)"></a>清除元素的默认内外边距(重要)</h4><p>为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除</p>
<p>代码： </p>
<pre><code class="css">* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}</code></pre>
<p>注意：  </p>
<ul>
<li>行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。</li>
</ul>
<h4 id="外边距合并"><a href="#外边距合并" class="headerlink" title="外边距合并"></a>外边距合并</h4><p>使用margin定义块元素的<strong>垂直外边距</strong>时，可能会出现外边距的合并。</p>
<h5 id="相邻块元素垂直外边距的合并"><a href="#相邻块元素垂直外边距的合并" class="headerlink" title="相邻块元素垂直外边距的合并"></a>相邻块元素垂直外边距的合并</h5><ul>
<li>当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom</li>
<li>下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和</li>
<li><strong>取两个值中的较大者</strong>这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。</li>
</ul>
<p><img src="http://helloxx.cn//d12.png" srcset="/myblog/img/loading.gif" alt=""></p>
<p><strong>解决方案：尽量给只给一个盒子添加margin值</strong>。</p>
<h5 id="嵌套块元素垂直外边距的合并（塌陷）"><a href="#嵌套块元素垂直外边距的合并（塌陷）" class="headerlink" title="嵌套块元素垂直外边距的合并（塌陷）"></a>嵌套块元素垂直外边距的合并（塌陷）</h5><ul>
<li><p>对于两个嵌套关系的块元素，如果父元素没有上内边距及边框</p>
</li>
<li><p>父元素的上外边距会与子元素的上外边距发生合并</p>
</li>
<li><p>合并后的外边距为两者中的较大者</p>
<p><img src="http://helloxx.cn//d13.png" srcset="/myblog/img/loading.gif" alt=""></p>
</li>
</ul>
<p><strong>解决方案：</strong></p>
<ol>
<li>可以为父元素定义上边框。</li>
<li>可以为父元素定义上内边距</li>
<li>可以为父元素添加overflow:hidden。</li>
</ol>
<p>还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题。</p>
<h3 id="盒子模型布局稳定性"><a href="#盒子模型布局稳定性" class="headerlink" title="盒子模型布局稳定性"></a>盒子模型布局稳定性</h3><ul>
<li><p>学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距？</p>
<ul>
<li>大部分情况下是可以混用的。  就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。</li>
</ul>
</li>
</ul>
<p>我们根据稳定性来分，建议如下：</p>
<p>按照 优先使用  宽度 （width）  其次 使用内边距（padding）    再次  外边距（margin）。   </p>
<pre><code>  width &gt;  padding  &gt;   margin   </code></pre><ul>
<li>原因：<ul>
<li>margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。</li>
<li>padding  会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。</li>
<li>width   没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。</li>
</ul>
</li>
</ul>
<h3 id="拓展"><a href="#拓展" class="headerlink" title="拓展@"></a>拓展@</h3><p>以下我们讲的CSS3部分新属性， 但是我们遵循的原则是，以下内容，不会影响我们页面布局， 只是样式更好看了而已。</p>
<h4 id="圆角边框-CSS3"><a href="#圆角边框-CSS3" class="headerlink" title="圆角边框(CSS3)"></a>圆角边框(CSS3)</h4><ul>
<li>语法：</li>
</ul>
<pre><code class="css">border-radius:length;  </code></pre>
<ul>
<li><p>其中每一个值可以为 数值或百分比的形式。 </p>
</li>
<li><p>技巧： 让一个正方形  变成圆圈 </p>
<pre><code>border-radius: 50%;</code></pre></li>
</ul>
<ul>
<li>以上效果图矩形的圆角， 就不要用 百分比了，因为百分比会是表示高度和宽度的一半。</li>
<li>而我们这里矩形就只用 用 高度的一半就好了。精确单位。</li>
</ul>
<h4 id="盒子阴影-CSS3"><a href="#盒子阴影-CSS3" class="headerlink" title="盒子阴影(CSS3)"></a>盒子阴影(CSS3)</h4><ul>
<li>语法:</li>
</ul>
<pre><code class="css">box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；</code></pre>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>h-shadow</td>
<td>必填。水平阴影位置。允许负值。</td>
</tr>
<tr>
<td>v-shadow</td>
<td>必填。垂直阴影位置。允许负值。</td>
</tr>
<tr>
<td>blur</td>
<td>可选。模糊距离</td>
</tr>
<tr>
<td>spread</td>
<td>可选。阴影的尺寸</td>
</tr>
<tr>
<td>color</td>
<td>可选。阴影的颜色</td>
</tr>
<tr>
<td>inset</td>
<td>可选。将外部阴影( outset )改为内部阴影</td>
</tr>
</tbody></table>
<ul>
<li>前两个属性是必须写的。其余的可以省略。</li>
<li>外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写  inset </li>
</ul>
<pre><code class="css">div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
            /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
            box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

}</code></pre>
<h3 id="CSS书写规范"><a href="#CSS书写规范" class="headerlink" title="CSS书写规范"></a>CSS书写规范</h3><p>开始就形成良好的书写规范，是你专业的开始。</p>
<h4 id="空格规范"><a href="#空格规范" class="headerlink" title="空格规范"></a>空格规范</h4><p>【强制】 选择器 与 { 之间必须包含空格。</p>
<p>示例： </p>
<pre><code class="css">.selector {
}</code></pre>
<p>【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。</p>
<p>示例：</p>
<pre><code class="css">font-size: 12px;</code></pre>
<h4 id="选择器规范"><a href="#选择器规范" class="headerlink" title="选择器规范"></a>选择器规范</h4><p>【强制】 并集选择器，每个选择器声明必须独占一行。</p>
<p>示例：</p>
<pre><code>/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}</code></pre><p>【建议】 一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。</p>
<p>示例：</p>
<pre><code class="css">/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login  input {}
.comment div * {}</code></pre>
<h4 id="属性规范"><a href="#属性规范" class="headerlink" title="属性规范"></a>属性规范</h4><p>【强制】 属性定义必须另起一行。</p>
<p>示例：</p>
<pre><code class="css">/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }</code></pre>
<p>【强制】 属性定义后必须以分号结尾。</p>
<p>示例：</p>
<pre><code class="css">/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}</code></pre>
<h2 id="浮动-float"><a href="#浮动-float" class="headerlink" title="浮动(float)"></a>浮动(float)</h2><h3 id="目标"><a href="#目标" class="headerlink" title="目标"></a>目标</h3><ul>
<li><strong>记忆</strong><ul>
<li>能够说出 CSS 的布局的三种机制</li>
</ul>
</li>
<li><strong>理解</strong><ul>
<li>能够说出普通流在布局中的特点</li>
<li>能够说出我们为什么用浮动</li>
<li>能够说出我们为什么要清除浮动</li>
</ul>
</li>
<li><strong>应用</strong><ul>
<li>能够利用浮动完成导航栏案例</li>
<li>能够清除浮动</li>
<li>能够使用PS切图工具</li>
</ul>
</li>
</ul>
<h3 id="CSS-布局的三种机制"><a href="#CSS-布局的三种机制" class="headerlink" title="CSS 布局的三种机制"></a>CSS 布局的三种机制</h3><blockquote>
<p>网页布局的核心——就是<strong>用 CSS 来摆放盒子</strong>。</p>
</blockquote>
<p>CSS 提供了 <strong>3 种机制</strong>来设置盒子的摆放位置，分别是<strong>普通流</strong>（标准流）、<strong>浮动</strong>和<strong>定位</strong>，其中： </p>
<ol>
<li><strong>普通流</strong>（标准流）<ul>
<li><strong>块级元素</strong>会独占一行，<strong>从上向下</strong>顺序排列；<ul>
<li>常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table</li>
</ul>
</li>
<li><strong>行内元素</strong>会按照顺序，<strong>从左到右</strong>顺序排列，碰到父元素边缘则自动换行；<ul>
<li>常用元素：span、a、i、em等</li>
</ul>
</li>
</ul>
</li>
<li><strong>浮动</strong><ul>
<li>让盒子从普通流中<strong>浮</strong>起来,主要作用让多个块级盒子一行显示。</li>
</ul>
</li>
<li><strong>定位</strong><ul>
<li>将盒子<strong>定</strong>在浏览器的某一个<strong>位</strong>置——CSS 离不开定位，特别是后面的 js 特效。</li>
</ul>
</li>
</ol>
<h3 id="为什么需要浮动？"><a href="#为什么需要浮动？" class="headerlink" title="为什么需要浮动？"></a>为什么需要浮动？</h3><p>思考题：</p>
<p> 我们首先要思考以下2个布局中最常见的问题？</p>
<ol>
<li><p>如何让多个盒子(div)水平排列成一行？</p>
<img src="http://helloxx.cn//d15.png" srcset="/myblog/img/loading.gif" style="zoom: 25%;" />
</li>
<li><p>如何实现盒子的左右对齐？</p>
</li>
</ol>
<img src="http://helloxx.cn//d16.png" srcset="/myblog/img/loading.gif" style="zoom:33%;" />

<p>虽然我们前面学过行内块（inline-block） 但是他却有自己的缺陷：</p>
<ol>
<li>它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。</li>
<li>它不能实现以上第二个问题，盒子左右对齐 </li>
</ol>
<p>总结</p>
<blockquote>
<p>因为一些网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。</p>
</blockquote>
<h3 id="什么是浮动-float"><a href="#什么是浮动-float" class="headerlink" title="什么是浮动(float)"></a>什么是浮动(float)</h3><p><strong>概念</strong>：元素的浮动是指<strong>设置了浮动属性的元素</strong>会</p>
<ol>
<li>脱离标准普通流的控制</li>
<li>移动到指定位置。</li>
</ol>
<h4 id="作用"><a href="#作用" class="headerlink" title="作用"></a>作用</h4><ol>
<li><strong>让多个盒子(div)水平排列成一行</strong>，使得浮动成为布局的重要手段。</li>
<li>可以实现盒子的左右对齐等等..</li>
<li>浮动最早是用来<strong>控制图片</strong>，实现<strong>文字环绕图片的效果</strong>。</li>
</ol>
<h4 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h4><p>在 CSS 中，通过 <code>float</code>  中文， 属性定义浮动，语法如下：</p>
<pre><code>选择器 { float: 属性值; }</code></pre><table>
<thead>
<tr>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><strong>none</strong></td>
<td>元素不浮动（<strong>默认值</strong>）</td>
</tr>
<tr>
<td><strong>left</strong></td>
<td>元素向左浮动</td>
</tr>
<tr>
<td><strong>right</strong></td>
<td>元素向右浮动</td>
</tr>
</tbody></table>
<h4 id="浮动-脱离标准流"><a href="#浮动-脱离标准流" class="headerlink" title="浮动-脱离标准流"></a>浮动-脱离标准流</h4><p>浮动——漂浮在普通流的上面。  脱离标准流。 俗称 “脱标”   </p>
<p> <img src="http://helloxx.cn//d17.png" srcset="/myblog/img/loading.gif" alt=""></p>
<pre><code class="css">.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}</code></pre>
<p><strong>小结</strong>：</p>
<ul>
<li><code>float</code> 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。</li>
</ul>
<h4 id="浮动-不占标准流位置"><a href="#浮动-不占标准流位置" class="headerlink" title="浮动-不占标准流位置"></a>浮动-不占标准流位置</h4><p>浮动——浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。</p>
<pre><code class="css">.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    /* 让第 1 个盒子漂浮起来，不占位置 */
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}</code></pre>
<p> 所以，box2下面的其实就是跑到box1盒子下面了， 被box1给压住了，遮挡起来了</p>
<h4 id="浮动-display"><a href="#浮动-display" class="headerlink" title="浮动-display"></a>浮动-display</h4><p>浮动——特性  float属性会改变元素display属性。</p>
<p>任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。</p>
<p>体验案例——div 水平排列</p>
<pre><code class="css">div {

    width: 200px;

    height: 200px;

    background-color: pink;

    /* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */

    /* display: inline-block; */

    /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */

    float: left;
}

.two {

    background-color: hotpink;

}</code></pre>
<p><strong>注意： 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐</strong></p>
<h3 id="浮动-float-小结"><a href="#浮动-float-小结" class="headerlink" title="浮动(float)小结"></a>浮动(float)小结</h3><blockquote>
<p>我们使用浮动的核心目的——让多个块级盒子在同一行显示。 因为这是我们最常见的一种布局方式</p>
</blockquote>
<h3 id="浮动-float-的应用（重要）"><a href="#浮动-float-的应用（重要）" class="headerlink" title="浮动(float)的应用（重要）"></a>浮动(float)的应用（重要）</h3><h4 id="浮动和标准流的父盒子搭配"><a href="#浮动和标准流的父盒子搭配" class="headerlink" title="浮动和标准流的父盒子搭配"></a>浮动和标准流的父盒子搭配</h4><p>我们知道，浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。</p>
<blockquote>
<p>一个完整的网页，是 标准流 +  浮动 +  我们后面要讲的定位 一起完成的。</p>
</blockquote>
<h4 id="浮动应用案例-导航栏"><a href="#浮动应用案例-导航栏" class="headerlink" title="浮动应用案例 - 导航栏"></a>浮动应用案例 - 导航栏</h4><p>注意，实际重要的导航栏中，我们不会直接用链接a 而是用 li  包含链接(li+a)的做法。</p>
<ol>
<li>li+a 语义更清晰，一看这就是有条理的列表型内容。</li>
<li>如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名</li>
</ol>
<h3 id="浮动-float-的扩展"><a href="#浮动-float-的扩展" class="headerlink" title="浮动(float)的扩展"></a>浮动(float)的扩展</h3><h4 id="浮动元素与父盒子的关系"><a href="#浮动元素与父盒子的关系" class="headerlink" title="浮动元素与父盒子的关系"></a>浮动元素与父盒子的关系</h4><ul>
<li>子盒子的浮动参照父盒子对齐</li>
<li>不会与父盒子的边框重叠，也不会超过父盒子的内边距<br>​</li>
</ul>
<h4 id="浮动元素与兄弟盒子的关系"><a href="#浮动元素与兄弟盒子的关系" class="headerlink" title="浮动元素与兄弟盒子的关系"></a>浮动元素与兄弟盒子的关系</h4><p>在一个父级盒子中，如果<strong>前一个兄弟盒子</strong>是：</p>
<ul>
<li><strong>浮动</strong>的，那么<strong>当前盒子</strong>会与前一个盒子的顶部对齐；</li>
<li><strong>普通流</strong>的，那么<strong>当前盒子</strong>会显示在前一个兄弟盒子的下方。 </li>
</ul>
<blockquote>
<p>浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。</p>
</blockquote>
<p><strong>建议</strong></p>
<p><strong>如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题</strong></p>
<h3 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h3><h4 id="为什么要清除浮动"><a href="#为什么要清除浮动" class="headerlink" title="为什么要清除浮动"></a>为什么要清除浮动</h4><p>因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。</p>
<img src="http://helloxx.cn//d18.jpg" srcset="/myblog/img/loading.gif" style="zoom: 67%;" />

<ul>
<li>总结：<ul>
<li>由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响</li>
<li>准确地说，并不是清除浮动，而是<strong>清除浮动后造成的影响</strong></li>
</ul>
</li>
</ul>
<h4 id="清除浮动本质"><a href="#清除浮动本质" class="headerlink" title="清除浮动本质"></a>清除浮动本质</h4><p>​    清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了</p>
<h4 id="清除浮动的方法"><a href="#清除浮动的方法" class="headerlink" title="清除浮动的方法"></a>清除浮动的方法</h4><p>在CSS中，clear属性用于清除浮动</p>
<ul>
<li>语法：</li>
</ul>
<pre><code>选择器{clear:属性值;}   clear 清除  </code></pre><table>
<thead>
<tr>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>left</td>
<td>不允许左侧有浮动元素（清除左侧浮动的影响）</td>
</tr>
<tr>
<td>right</td>
<td>不允许右侧有浮动元素（清除右侧浮动的影响）</td>
</tr>
<tr>
<td>both</td>
<td>同时清除左右两侧浮动的影响</td>
</tr>
</tbody></table>
<p>但是我们实际工作中， 几乎只用 clear: both;</p>
<h5 id="1-额外标签法-隔墙法"><a href="#1-额外标签法-隔墙法" class="headerlink" title="1).额外标签法(隔墙法)"></a>1).额外标签法(隔墙法)</h5><pre><code class="html">是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 &lt;div style=”clear:both”&gt;&lt;/div&gt;，或则其他标签br等亦可。</code></pre>
<ul>
<li>优点： 通俗易懂，书写方便</li>
<li>缺点： 添加许多无意义的标签，结构化较差。</li>
</ul>
<h5 id="2-父级添加overflow属性方法"><a href="#2-父级添加overflow属性方法" class="headerlink" title="2).父级添加overflow属性方法"></a>2).父级添加overflow属性方法</h5><pre><code class="css">可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。</code></pre>
<p>优点：  代码简洁</p>
<p>缺点：  内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。</p>
<h5 id="3-使用after伪元素清除浮动"><a href="#3-使用after伪元素清除浮动" class="headerlink" title="3).使用after伪元素清除浮动"></a>3).使用after伪元素清除浮动</h5><p><strong>:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了</strong> </p>
<p>使用方法：</p>
<pre><code class="css"> .clearfix:after {  content: &quot;&quot;; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */</code></pre>
<ul>
<li>优点： 符合闭合浮动思想  结构语义化正确</li>
<li>缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。</li>
<li>代表网站： 百度、淘宝网、网易等</li>
</ul>
<h5 id="4-使用双伪元素清除浮动"><a href="#4-使用双伪元素清除浮动" class="headerlink" title="4).使用双伪元素清除浮动"></a>4).使用双伪元素清除浮动</h5><p>使用方法：</p>
<pre><code class="css">.clearfix:before,.clearfix:after { 
  content:&quot;&quot;;
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}</code></pre>
<ul>
<li><p>优点：  代码更简洁</p>
</li>
<li><p>缺点：  由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。</p>
</li>
<li><p>代表网站： 小米、腾讯等</p>
</li>
</ul>
<h4 id="清除浮动总结"><a href="#清除浮动总结" class="headerlink" title="清除浮动总结"></a>清除浮动总结</h4><p>什么时候用清除浮动呢？</p>
<ol>
<li>父级没高度</li>
<li>子盒子浮动了</li>
<li>影响下面布局了，我们就应该清除浮动了。</li>
</ol>
<table>
<thead>
<tr>
<th>清除浮动的方式</th>
<th align="left">优点</th>
<th align="left">缺点</th>
</tr>
</thead>
<tbody><tr>
<td>额外标签法（隔墙法）</td>
<td align="left">通俗易懂，书写方便</td>
<td align="left">添加许多无意义的标签，结构化较差。</td>
</tr>
<tr>
<td>父级overflow:hidden;</td>
<td align="left">书写简单</td>
<td align="left">溢出隐藏</td>
</tr>
<tr>
<td>父级after伪元素</td>
<td align="left">结构语义化正确</td>
<td align="left">由于IE6-7不支持:after，兼容性问题</td>
</tr>
<tr>
<td>父级双伪元素</td>
<td align="left">结构语义化正确</td>
<td align="left">由于IE6-7不支持:after，兼容性问题</td>
</tr>
</tbody></table>
<h2 id="CSS属性书写顺序-重点"><a href="#CSS属性书写顺序-重点" class="headerlink" title="CSS属性书写顺序(重点)"></a>CSS属性书写顺序(重点)</h2><p>建议遵循以下顺序：</p>
<ol>
<li>布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）</li>
<li>自身属性：width / height / margin / padding / border / background</li>
<li>文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word</li>
<li>其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …</li>
</ol>
<h2 id="布局流程"><a href="#布局流程" class="headerlink" title="布局流程"></a>布局流程</h2><p>为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：</p>
<p>1、必须确定页面的版心（可视区）， 我们测量可得知。</p>
<p>2、分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成</p>
<p>3、制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。</p>
<p>4、然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。</p>
<h2 id="定位-position"><a href="#定位-position" class="headerlink" title="定位(position)"></a>定位(position)</h2><h3 id="目标-1"><a href="#目标-1" class="headerlink" title="目标"></a>目标</h3><ul>
<li><strong>理解</strong><ul>
<li>能说出为什么要用定位</li>
<li>能说出定位的4种分类</li>
<li>能说出四种定位的各自特点</li>
<li>能说出我们为什么常用子绝父相布局</li>
</ul>
</li>
<li><strong>应用</strong><ul>
<li>能写出淘宝轮播图布局</li>
</ul>
</li>
</ul>
<h3 id="CSS-布局的三种机制-1"><a href="#CSS-布局的三种机制-1" class="headerlink" title="CSS 布局的三种机制"></a>CSS 布局的三种机制</h3><blockquote>
<p>网页布局的核心 —— 就是<strong>用 CSS 来摆放盒子位置</strong>。</p>
</blockquote>
<p>CSS 提供了 <strong>3 种机制</strong>来设置盒子的摆放位置，分别是<strong>普通流</strong>、<strong>浮动</strong>和<strong>定位</strong>，其中：</p>
<ol>
<li><p><strong>普通流</strong>（<strong>标准流</strong>）</p>
</li>
<li><p><strong>浮动</strong></p>
<ul>
<li>让盒子从普通流中<strong>浮</strong>起来 —— <strong>让多个盒子(div)水平排列成一行</strong>。</li>
</ul>
</li>
<li><p><strong>定位</strong></p>
<ul>
<li>将盒子<strong>定</strong>在某一个<strong>位</strong>置  自由的漂浮在其他盒子的上面  —— CSS 离不开定位，特别是后面的 js 特效。</li>
</ul>
</li>
</ol>
<blockquote>
<p><strong>结论</strong>：要实现以上效果，<strong>标准流</strong>或<strong>浮动</strong>都无法快速实现</p>
</blockquote>
<p>定位：</p>
<blockquote>
<p>将盒子<strong>定</strong>在某一个<strong>位</strong>置  自由的漂浮在其他盒子(包括标准流和浮动)的上面 </p>
</blockquote>
<p>所以，我们脑海应该有三种布局机制的上下顺序</p>
<p>标准流在最底层 (海底)  ——-    浮动 的盒子 在 中间层  (海面)  ——-   定位的盒子 在 最上层  （天空）</p>
<h3 id="定位详解"><a href="#定位详解" class="headerlink" title="定位详解"></a>定位详解</h3><p>定位也是用来布局的，它有两部分组成：</p>
<blockquote>
<p><code>定位 = 定位模式 + 边偏移</code></p>
</blockquote>
<h4 id="边偏移"><a href="#边偏移" class="headerlink" title="边偏移"></a>边偏移</h4><p>简单说， 我们定位的盒子，是通过边偏移来移动位置的。</p>
<p>在 CSS 中，通过 <code>top</code>、<code>bottom</code>、<code>left</code> 和 <code>right</code> 属性定义元素的<strong>边偏移</strong>：（方位名词）</p>
<table>
<thead>
<tr>
<th>边偏移属性</th>
<th align="left">示例</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><code>top</code></td>
<td align="left"><code>top: 80px</code></td>
<td><strong>顶端</strong>偏移量，定义元素相对于其父元素<strong>上边线的距离</strong>。</td>
</tr>
<tr>
<td><code>bottom</code></td>
<td align="left"><code>bottom: 80px</code></td>
<td><strong>底部</strong>偏移量，定义元素相对于其父元素<strong>下边线的距离</strong>。</td>
</tr>
<tr>
<td><code>left</code></td>
<td align="left"><code>left: 80px</code></td>
<td><strong>左侧</strong>偏移量，定义元素相对于其父元素<strong>左边线的距离</strong>。</td>
</tr>
<tr>
<td><code>right</code></td>
<td align="left"><code>right: 80px</code></td>
<td><strong>右侧</strong>偏移量，定义元素相对于其父元素<strong>右边线的距离</strong></td>
</tr>
</tbody></table>
<p>定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。</p>
<h4 id="定位模式-position"><a href="#定位模式-position" class="headerlink" title="定位模式 (position)"></a>定位模式 (position)</h4><p>在 CSS 中，通过 <code>position</code> 属性定义元素的<strong>定位模式</strong>，语法如下：</p>
<pre><code class="css">选择器 { position: 属性值; }</code></pre>
<p>定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。<br>| 值         |     语义     |<br>| ———- | :———-: |<br>| <code>static</code>   | <strong>静态</strong>定位 |<br>| <code>relative</code> | <strong>相对</strong>定位 |<br>| <code>absolute</code> | <strong>绝对</strong>定位 |<br>| <code>fixed</code>    | <strong>固定</strong>定位 |</p>
<p><img src="http://helloxx.cn//d27.png" srcset="/myblog/img/loading.gif" alt=""></p>
<h5 id="静态定位-static-了解"><a href="#静态定位-static-了解" class="headerlink" title="静态定位(static) - 了解"></a>静态定位(static) - 了解</h5><ul>
<li><strong>静态定位</strong>是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。</li>
<li>静态定位 按照标准流特性摆放位置，它没有边偏移。</li>
<li>静态定位在布局时我们几乎不用的 </li>
</ul>
<h5 id="相对定位-relative-重要"><a href="#相对定位-relative-重要" class="headerlink" title="相对定位(relative) - 重要"></a>相对定位(relative) - 重要</h5><ul>
<li><strong>相对定位</strong>是元素<strong>相对</strong>于它  原来在标准流中的位置 来说的。</li>
</ul>
<p><strong>效果图</strong>：</p>
<img src="http://helloxx.cn//d19.png" srcset="/myblog/img/loading.gif" style="zoom: 25%;" />

<p>相对定位的特点：</p>
<ul>
<li>相对于 自己原来在标准流中位置来移动的</li>
<li>原来<strong>在标准流的区域继续占有</strong>，后面的盒子仍然以标准流的方式对待它。</li>
</ul>
<h5 id="绝对定位-absolute-重要"><a href="#绝对定位-absolute-重要" class="headerlink" title="绝对定位(absolute) - 重要"></a>绝对定位(absolute) - 重要</h5><p><strong>绝对定位</strong>是元素以带有定位的父级元素来移动位置 （拼爹型）</p>
<ol>
<li><p><strong>完全脱标</strong> —— 完全不占位置；  </p>
</li>
<li><p><strong>父元素没有定位</strong>，则以<strong>浏览器</strong>为准定位（Document 文档）。</p>
<img src="http://helloxx.cn//d20.png" srcset="/myblog/img/loading.gif" style="zoom:25%;" />
</li>
<li><p><strong>父元素要有定位</strong></p>
<ul>
<li>将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。</li>
</ul>
</li>
</ol>
<img src="http://helloxx.cn//d21.png" srcset="/myblog/img/loading.gif" style="zoom:25%;" />

<p>绝对定位的特点：（务必记住）</p>
<ul>
<li>绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置</li>
<li>不保留原来的位置，完全是脱标的。</li>
</ul>
<p>因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。</p>
<p>定位口诀 —— 子绝父相</p>
<p>刚才咱们说过，绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？</p>
<p><strong>子绝父相</strong> —— <strong>子级</strong>是<strong>绝对</strong>定位，<strong>父级</strong>要用<strong>相对</strong>定位。</p>
<blockquote>
<p><strong>子绝父相</strong>是使用绝对定位的口诀，要牢牢记住！</p>
</blockquote>
<p><strong>疑问</strong>：为什么在布局时，<strong>子级元素</strong>使用<strong>绝对定位</strong>时，<strong>父级元素</strong>就要用<strong>相对定位</strong>呢？</p>
<p>观察下图，思考一下在布局时，<strong>左右两个方向的箭头图片</strong>以及<strong>父级盒子</strong>的定位方式。</p>
<img src="http://helloxx.cn//d22.png" srcset="/myblog/img/loading.gif" style="zoom: 80%;" />

<p><strong>分析</strong>：</p>
<ol>
<li><strong>方向箭头</strong>叠加在其他图片上方，应该使用<strong>绝对定位</strong>，因为<strong>绝对定位完全脱标</strong>，完全不占位置。</li>
<li><strong>父级盒子</strong>应该使用<strong>相对定位</strong>，因为<strong>相对定位不脱标</strong>，后续盒子仍然以标准流的方式对待它。<ul>
<li>如果父级盒子也使用<strong>绝对定位</strong>，会完全脱标，那么下方的<strong>广告盒子</strong>会上移，这显然不是我们想要的。</li>
</ul>
</li>
</ol>
<p><strong>结论</strong>：<strong>父级要占有位置，子级要任意摆放</strong>，这就是<strong>子绝父相</strong>的由来。</p>
<h5 id="固定定位-fixed-重要"><a href="#固定定位-fixed-重要" class="headerlink" title="固定定位(fixed) - 重要"></a>固定定位(fixed) - 重要</h5><p><strong>固定定位</strong>是<strong>绝对定位</strong>的一种特殊形式： （认死理型）   如果说绝对定位是一个矩形 那么 固定定位就类似于正方形</p>
<ol>
<li><strong>完全脱标</strong> —— 完全不占位置；</li>
<li>只认<strong>浏览器的可视窗口</strong> —— <code>浏览器可视窗口 + 边偏移属性</code> 来设置元素的位置；<ul>
<li>跟父元素没有任何关系；单独使用的</li>
<li>不随滚动条滚动。</li>
</ul>
</li>
</ol>
<p><strong>提示</strong>：IE 6 等低版本浏览器不支持固定定位。</p>
<h3 id="定位-position-的案例"><a href="#定位-position-的案例" class="headerlink" title="定位(position)的案例"></a>定位(position)的案例</h3><ol>
<li><strong>子绝父相</strong> —— <strong>子元素</strong>使用<strong>绝对定位</strong>，<strong>父元素</strong>使用<strong>相对定位</strong>；</li>
<li><strong>与浮动的对比</strong>：<ul>
<li><strong>绝对定位</strong>：脱标，<strong>利用边偏移指定准确位置</strong>；</li>
<li><strong>浮动</strong>：脱标，不能指定准确位置，<strong>让多个块级元素在一行显示</strong>。</li>
</ul>
</li>
</ol>
<h4 id="仿新浪头部和广告"><a href="#仿新浪头部和广告" class="headerlink" title="仿新浪头部和广告"></a>仿新浪头部和广告</h4><p><img src="http://helloxx.cn//d23.png" srcset="/myblog/img/loading.gif" alt=""></p>
<p>新浪案例分析</p>
<ol>
<li>顶部图片<strong>固定</strong>在浏览器可视窗口顶部，不会随窗口一起滚动；</li>
<li>左右两侧的广告图片<strong>固定</strong>在浏览器可视窗口的左右两侧，不会随窗口一起滚动；</li>
<li>注意：<strong>底部的内容图片</strong>初始<strong>显示在顶部图片的下方</strong>，如何解决？</li>
</ol>
<p>步骤 1 —— 顶部图片和底部内容</p>
<pre><code class="css">.top {
    /* 注意：使用固定定位时，如果盒子中没有内容，需要指定宽度 */
    width: 100%;
    height: 44px;
    background: url(images/top.png) no-repeat top center;
    position: fixed;
    left: 0px;
    top: 0px;
}

.box {
    width: 1002px;
    /* 顶部的 44px 的 margin 可以让 box 显示在顶部图片下方 */
    margin: 44px auto;
}</code></pre>
<p><strong>注意</strong>：</p>
<ol>
<li>在使用固定定位时，如果盒子中没有内容，需要指定宽度</li>
<li>设置底部内容图片的<strong>顶部 <code>margin</code></strong>，可以让底部盒子初始显示在顶部图片的下方。</li>
</ol>
<p>步骤 2 —— 左右两侧广告</p>
<pre><code class="css">.ad-left,
.ad-right {
    position: fixed;
    top: 100px;
}

.ad-left {
    left: 0px;
}

.ad-right {
    right: 0px;
}</code></pre>
<p><strong>注意</strong>：不要同时使用 <code>left</code> 和 <code>right</code> 和边偏移属性。</p>
<p><strong>案例小结</strong>：</p>
<ol>
<li><strong>固定定位</strong>的应用场景：<strong>固定在浏览器可视窗口某个位置的布局</strong>；</li>
<li>在使用固定和绝对定位时，如果盒子中没有内容，需要指定宽度（稍后就讲）。</li>
</ol>
<h3 id="定位-position-的扩展"><a href="#定位-position-的扩展" class="headerlink" title="定位(position)的扩展"></a>定位(position)的扩展</h3><h4 id="绝对定位的盒子居中"><a href="#绝对定位的盒子居中" class="headerlink" title="绝对定位的盒子居中"></a>绝对定位的盒子居中</h4><blockquote>
<p><strong>注意</strong>：<strong>绝对定位/固定定位的盒子</strong>不能通过设置 <code>margin: auto</code> 设置<strong>水平居中</strong>。</p>
</blockquote>
<p>在使用<strong>绝对定位</strong>时要想实现水平居中的方法：</p>
<ol>
<li><code>left: 50%;</code>：让<strong>盒子的左侧</strong>移动到<strong>父级元素的水平中心位置</strong>；</li>
<li><code>margin-left: -100px;</code>：让盒子<strong>向左</strong>移动<strong>自身宽度的一半</strong>。</li>
</ol>
<p>盒子居中定位示意图</p>
<p><img src="http://helloxx.cn//d24.png" srcset="/myblog/img/loading.gif" alt=""></p>
<h4 id="堆叠顺序（z-index）"><a href="#堆叠顺序（z-index）" class="headerlink" title="堆叠顺序（z-index）"></a>堆叠顺序（z-index）</h4><p>在使用<strong>定位</strong>布局时，可能会<strong>出现盒子重叠的情况</strong>。</p>
<p>加了定位的盒子，默认<strong>后来者居上</strong>， 后面的盒子会压住前面的盒子。</p>
<p>应用 <code>z-index</code> 层叠等级属性可以<strong>调整盒子的堆叠顺序</strong>。如下图所示：</p>
<p><img src="http://helloxx.cn//d25.png" srcset="/myblog/img/loading.gif" alt=""></p>
<p><code>z-index</code> 的特性如下：</p>
<ol>
<li><strong>属性值</strong>：<strong>正整数</strong>、<strong>负整数</strong>或 <strong>0</strong>，默认值是 0，数值越大，盒子越靠上；</li>
<li>如果<strong>属性值相同</strong>，则按照书写顺序，<strong>后来居上</strong>；</li>
<li><strong>数字后面不能加单位</strong>。</li>
</ol>
<p><strong>注意</strong>：<code>z-index</code> 只能应用于<strong>相对定位</strong>、<strong>绝对定位</strong>和<strong>固定定位</strong>的元素，其他<strong>标准流</strong>、<strong>浮动</strong>和<strong>静态定位</strong>无效。</p>
<h4 id="定位改变display属性"><a href="#定位改变display属性" class="headerlink" title="定位改变display属性"></a>定位改变display属性</h4><p> 前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:</p>
<ul>
<li>可以用inline-block  转换为行内块</li>
<li>可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）</li>
<li>绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。</li>
</ul>
<p>所以说， 一个行内的盒子，如果加了<strong>浮动</strong>、<strong>固定定位</strong>和<strong>绝对定位</strong>，不用转换，就可以给这个盒子直接设置宽度和高度等。</p>
<blockquote>
<p>完善新浪导航案例</p>
</blockquote>
<p><strong>同时注意：</strong></p>
<p>浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）</p>
<p>也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。</p>
<h3 id="综合演练-淘宝轮播图"><a href="#综合演练-淘宝轮播图" class="headerlink" title="综合演练 - 淘宝轮播图"></a>综合演练 - 淘宝轮播图</h3><p><img src="http://helloxx.cn//d26.png" srcset="/myblog/img/loading.gif" alt=""></p>
<p>圆角矩形设置4个角</p>
<p>圆角矩形可以为4个角分别设置圆度， 但是是有顺序的</p>
<pre><code>border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;</code></pre><ul>
<li><p>如果4个角，数值相同</p>
<pre><code class="css">border-radius: 15px;</code></pre>
</li>
<li><p>里面数值不同，我们也可以按照简写的形式，具体格式如下:</p>
</li>
</ul>
<pre><code class="css">border-radius: 左上角 右上角  右下角  左下角;</code></pre>
<p>还是遵循的顺时针。</p>
<h3 id="定位小结"><a href="#定位小结" class="headerlink" title="定位小结"></a>定位小结</h3><table>
<thead>
<tr>
<th>定位模式</th>
<th>是否脱标占有位置</th>
<th align="left">移动位置基准</th>
<th>模式转换（行内块）</th>
<th>使用情况</th>
</tr>
</thead>
<tbody><tr>
<td>静态static</td>
<td>不脱标，正常模式</td>
<td align="left">正常模式</td>
<td>不能</td>
<td>几乎不用</td>
</tr>
<tr>
<td>相对定位relative</td>
<td>不脱标，占有位置</td>
<td align="left">相对自身位置移动</td>
<td>不能</td>
<td>基本单独使用</td>
</tr>
<tr>
<td>绝对定位absolute</td>
<td>完全脱标，不占有位置</td>
<td align="left">相对于定位父级移动位置</td>
<td>能</td>
<td>要和定位父级元素搭配使用</td>
</tr>
<tr>
<td>固定定位fixed</td>
<td>完全脱标，不占有位置</td>
<td align="left">相对于浏览器移动位置</td>
<td>能</td>
<td>单独使用，不需要父级</td>
</tr>
</tbody></table>
<p><strong>注意</strong>：</p>
<ol>
<li><strong>边偏移</strong>需要和<strong>定位模式</strong>联合使用，<strong>单独使用无效</strong>；</li>
<li><code>top</code> 和 <code>bottom</code> 不要同时使用；</li>
<li><code>left</code> 和 <code>right</code> 不要同时使用。</li>
</ol>
<h3 id="网页布局总结"><a href="#网页布局总结" class="headerlink" title="网页布局总结"></a>网页布局总结</h3><p>一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。</p>
<p>1). 标准流 </p>
<p>可以让盒子上下排列 或者 左右排列的</p>
<p>2). 浮动</p>
<p>可以让多个块级元素一行显示  或者 左右对齐盒子   浮动的盒子就是按照顺序左右排列 </p>
<p>3). 定位</p>
<p>定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。</p>
<h1 id="CSS高级技巧"><a href="#CSS高级技巧" class="headerlink" title="CSS高级技巧"></a>CSS高级技巧</h1><p><strong>目标</strong></p>
<ul>
<li>理解<ul>
<li>能说出元素显示隐藏最常见的写法</li>
<li>能说出精灵图产生的目的</li>
<li>能说出去除图片底侧空白缝隙的方法</li>
</ul>
</li>
<li>应用<ul>
<li>能写出最常见的鼠标样式</li>
<li>能使用精灵图技术</li>
<li>能用滑动门做导航栏案例</li>
</ul>
</li>
</ul>
<h2 id="元素的显示与隐藏"><a href="#元素的显示与隐藏" class="headerlink" title="元素的显示与隐藏"></a>元素的显示与隐藏</h2><ul>
<li><p>目的</p>
<p>让一个元素在页面中消失或者显示出来</p>
</li>
<li><p>场景</p>
<p>类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！</p>
</li>
</ul>
<h3 id="display-显示（重点）"><a href="#display-显示（重点）" class="headerlink" title="display 显示（重点）"></a>display 显示（重点）</h3><ul>
<li><p>display 设置或检索对象是否及如何显示。</p>
<pre><code>display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。</code></pre></li>
<li><p>特点： 隐藏之后，不再保留位置。</p>
</li>
</ul>
<img src="http://helloxx.cn//d28.png" srcset="/myblog/img/loading.gif" style="zoom:80%;" />

<p>实际开发场景：</p>
<blockquote>
<p>配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛</p>
</blockquote>
<h3 id="visibility-可见性-了解"><a href="#visibility-可见性-了解" class="headerlink" title="visibility 可见性 (了解)"></a>visibility 可见性 (了解)</h3><ul>
<li><p>设置或检索是否显示对象。</p>
<pre><code>visibility：visible ; 　对象可视

visibility：hidden; 　  对象隐藏</code></pre></li>
<li><p>特点： 隐藏之后，继续保留原有位置。</p>
</li>
</ul>
<img src="http://helloxx.cn//d29.png" srcset="/myblog/img/loading.gif" style="zoom:80%;" />

<h3 id="overflow-溢出-重点"><a href="#overflow-溢出-重点" class="headerlink" title="overflow 溢出(重点)"></a>overflow 溢出(重点)</h3><ul>
<li>检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。</li>
</ul>
<table>
<thead>
<tr>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><strong>visible</strong></td>
<td>不剪切内容也不添加滚动条</td>
</tr>
<tr>
<td><strong>hidden</strong></td>
<td>不显示超过对象尺寸的内容，超出的部分隐藏掉</td>
</tr>
<tr>
<td><strong>scroll</strong></td>
<td>不管超出内容否，总是显示滚动条</td>
</tr>
<tr>
<td><strong>auto</strong></td>
<td>超出自动显示滚动条，不超出不显示滚动条</td>
</tr>
</tbody></table>
<p>实际开发场景：</p>
<ol>
<li>清除浮动</li>
<li>隐藏超出内容，隐藏掉,  不允许内容超过父盒子。</li>
</ol>
<h3 id="显示与隐藏总结"><a href="#显示与隐藏总结" class="headerlink" title="显示与隐藏总结"></a>显示与隐藏总结</h3><table>
<thead>
<tr>
<th>属性</th>
<th>区别</th>
<th>用途</th>
</tr>
</thead>
<tbody><tr>
<td><strong>display</strong></td>
<td>隐藏对象，不保留位置</td>
<td>配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛</td>
</tr>
<tr>
<td><strong>visibility</strong></td>
<td>隐藏对象，保留位置</td>
<td>使用较少</td>
</tr>
<tr>
<td><strong>overflow</strong></td>
<td>只是隐藏超出大小的部分</td>
<td>1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围</td>
</tr>
<tr>
<td>## CSS用户界面样式</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<ul>
<li>所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。<ul>
<li>更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究) </li>
<li>表单轮廓等。</li>
<li>防止表单域拖拽</li>
</ul>
</li>
</ul>
<h3 id="鼠标样式cursor"><a href="#鼠标样式cursor" class="headerlink" title="鼠标样式cursor"></a>鼠标样式cursor</h3><p> 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><strong>default</strong></td>
<td>小白  默认</td>
</tr>
<tr>
<td><strong>pointer</strong></td>
<td>小手</td>
</tr>
<tr>
<td><strong>move</strong></td>
<td>移动</td>
</tr>
<tr>
<td><strong>text</strong></td>
<td>文本</td>
</tr>
<tr>
<td><strong>not-allowed</strong></td>
<td>禁止</td>
</tr>
<tr>
<td>鼠标放我身上查看效果哦：</td>
<td></td>
</tr>
</tbody></table>
<pre><code class="html">&lt;ul&gt;
  &lt;li style=&quot;cursor:default&quot;&gt;我是小白&lt;/li&gt;
  &lt;li style=&quot;cursor:pointer&quot;&gt;我是小手&lt;/li&gt;
  &lt;li style=&quot;cursor:move&quot;&gt;我是移动&lt;/li&gt;
  &lt;li style=&quot;cursor:text&quot;&gt;我是文本&lt;/li&gt;
  &lt;li style=&quot;cursor:not-allowed&quot;&gt;我是文本&lt;/li&gt;
&lt;/ul&gt;</code></pre>
<h3 id="轮廓线-outline"><a href="#轮廓线-outline" class="headerlink" title="轮廓线 outline"></a>轮廓线 outline</h3><p><img src="http://helloxx.cn//d30.png" srcset="/myblog/img/loading.gif" alt=""></p>
<p> 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 </p>
<pre><code class="css"> outline : outline-color ||outline-style || outline-width </code></pre>
<p> 但是我们都不关心可以设置多少，我们平时都是去掉的。 li  </p>
<p>最直接的写法是 ：  outline: 0;   或者  outline: none;</p>
<pre><code class="html"> &lt;input  type=&quot;text&quot;  style=&quot;outline: 0;&quot;/&gt;</code></pre>
<h3 id="防止拖拽文本域resize"><a href="#防止拖拽文本域resize" class="headerlink" title="防止拖拽文本域resize"></a>防止拖拽文本域resize</h3><p><img src="http://helloxx.cn//d31.png" srcset="/myblog/img/loading.gif" alt=""></p>
<p>实际开发中，我们文本域右下角是不可以拖拽： </p>
<pre><code class="html">&lt;textarea  style=&quot;resize: none;&quot;&gt;&lt;/textarea&gt;</code></pre>
<h3 id="用户界面样式总结"><a href="#用户界面样式总结" class="headerlink" title="用户界面样式总结"></a>用户界面样式总结</h3><table>
<thead>
<tr>
<th>属性</th>
<th>用途</th>
<th>用途</th>
</tr>
</thead>
<tbody><tr>
<td><strong>鼠标样式</strong></td>
<td>更改鼠标样式cursor</td>
<td>样式很多，重点记住 pointer</td>
</tr>
<tr>
<td><strong>轮廓线</strong></td>
<td>表单默认outline</td>
<td>outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用</td>
</tr>
<tr>
<td>防止拖拽</td>
<td>主要针对文本域resize</td>
<td>防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none</td>
</tr>
<tr>
<td>## vertical-align 垂直对齐</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<ul>
<li>有宽度的块级元素居中对齐，是margin: 0 auto;</li>
<li>让文字居中对齐，是 text-align: center;</li>
</ul>
<p>但是我们从来没有讲过有垂直居中的属性。</p>
<p>vertical-align 垂直对齐，它只针对于<strong>行内元素</strong>或者<strong>行内块元素</strong>，</p>
<pre><code class="css">vertical-align : baseline |top |middle |bottom </code></pre>
<p>设置或检索对象内容的垂直对其方式。</p>
<ul>
<li><p>注意：</p>
<p>vertical-align 不影响块级元素中的内容对齐，它只针对于<strong>行内元素</strong>或者<strong>行内块元素</strong>，</p>
<p>特别是行内块元素， <strong>通常用来控制图片/表单与文字的对齐</strong>。</p>
</li>
</ul>
<h3 id="图片、表单和文字对齐"><a href="#图片、表单和文字对齐" class="headerlink" title="图片、表单和文字对齐"></a>图片、表单和文字对齐</h3><p>所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。</p>
<p> <img src="http://helloxx.cn//d32.jpg" srcset="/myblog/img/loading.gif" alt=""></p>
<p><img src="http://helloxx.cn//d33.png" srcset="/myblog/img/loading.gif" alt=""></p>
<h3 id="去除图片底侧空白缝隙"><a href="#去除图片底侧空白缝隙" class="headerlink" title="去除图片底侧空白缝隙"></a>去除图片底侧空白缝隙</h3><p><img src="http://helloxx.cn//d34.png" srcset="/myblog/img/loading.gif" alt=""></p>
<ul>
<li><p>原因：</p>
<p>图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。</p>
<p>就是图片底侧会有一个空白缝隙。</p>
</li>
<li><p>解决的方法就是：  </p>
<ul>
<li><p>给img vertical-align:middle | top| bottom等等。  让图片不要和基线对齐。</p>
<pre><code class="css">img{vertical-align: top}</code></pre>
</li>
<li><p>给img 添加 display：block; 转换为块级元素就不会存在问题了。</p>
</li>
</ul>
</li>
</ul>
<h2 id="溢出的文字省略号显示"><a href="#溢出的文字省略号显示" class="headerlink" title="溢出的文字省略号显示"></a>溢出的文字省略号显示</h2><h3 id="white-space"><a href="#white-space" class="headerlink" title="white-space"></a>white-space</h3><ul>
<li>white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容 </li>
</ul>
<pre><code>white-space:normal ；默认处理方式

white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。</code></pre><h3 id="text-overflow-文字溢出"><a href="#text-overflow-文字溢出" class="headerlink" title="text-overflow 文字溢出"></a>text-overflow 文字溢出</h3><ul>
<li>设置或检索是否使用一个省略标记（…）标示对象内文本的溢出</li>
</ul>
<pre><code>text-overflow : clip ；不显示省略标记（...），而是简单的裁切 

text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）</code></pre><p><strong>注意</strong>：</p>
<p>一定要首先强制一行内显示，再次和overflow属性  搭配使用</p>
<p><img src="http://helloxx.cn//d35.png" srcset="/myblog/img/loading.gif" alt=""></p>
<h3 id="总结三步曲"><a href="#总结三步曲" class="headerlink" title="总结三步曲"></a>总结三步曲</h3><pre><code class="css">  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;</code></pre>
<h2 id="CSS精灵技术（sprite-重点"><a href="#CSS精灵技术（sprite-重点" class="headerlink" title="CSS精灵技术（sprite) 重点"></a>CSS精灵技术（sprite) 重点</h2><h3 id="为什么需要精灵技术"><a href="#为什么需要精灵技术" class="headerlink" title="为什么需要精灵技术"></a>为什么需要精灵技术</h3><p>图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。</p>
<p>然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。</p>
<blockquote>
<p> <strong>为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。</strong></p>
</blockquote>
<p>出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。</p>
<h3 id="精灵技术讲解"><a href="#精灵技术讲解" class="headerlink" title="精灵技术讲解"></a>精灵技术讲解</h3><p>CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。</p>
<p><img src="http://helloxx.cn//d38.png" srcset="/myblog/img/loading.gif" alt=""></p>
<p>这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。</p>
<p>我们需要使用CSS的</p>
<ul>
<li>background-image</li>
<li>background-repeat</li>
<li>background-position属性进行背景定位，</li>
<li>其中最关键的是使用background-position 属性精确地定位。</li>
</ul>
<h3 id="精灵技术使用的核心总结"><a href="#精灵技术使用的核心总结" class="headerlink" title="精灵技术使用的核心总结"></a>精灵技术使用的核心总结</h3><p>首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。</p>
<ol>
<li>精确测量，每个小背景图片的大小和 位置。</li>
<li>给盒子指定小背景图片时， 背景定位基本都是 负值。</li>
</ol>
<h3 id="制作精灵图-了解"><a href="#制作精灵图-了解" class="headerlink" title="制作精灵图(了解)"></a>制作精灵图(了解)</h3><p>CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。</p>
<p>大部分情况下，精灵图都是网页美工做。</p>
<pre><code>我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。</code></pre><p>结束语：   小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。</p>
<h2 id="滑动门"><a href="#滑动门" class="headerlink" title="滑动门"></a>滑动门</h2><h3 id="滑动门出现的背景"><a href="#滑动门出现的背景" class="headerlink" title="滑动门出现的背景"></a>滑动门出现的背景</h3><p>制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？</p>
<p><img src="http://helloxx.cn//d36.jpg" srcset="/myblog/img/loading.gif" alt=""></p>
<p>为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。</p>
<p><a href="http://weixin.qq.com/" target="_blank" rel="noopener">http://weixin.qq.com/</a></p>
<h3 id="核心技术"><a href="#核心技术" class="headerlink" title="核心技术"></a>核心技术</h3><p>核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。</p>
<p>一般的经典布局都是这样的：</p>
<pre><code class="html">&lt;li&gt;
  &lt;a href=&quot;#&quot;&gt;
    &lt;span&gt;导航栏内容&lt;/span&gt;
  &lt;/a&gt;
&lt;/li&gt;</code></pre>
<p>css样式</p>
<pre><code class="css">* {
      padding:0;
      margin:0;

    }
    body{
      background: url(images/wx.jpg) repeat-x;
    }
    .father {
      padding-top:20px;
    }
    li {
      padding-left: 16px;
      height: 33px;
      float: left;
      line-height: 33px;
      margin:0  10px;
      background: url(./images/to.png) no-repeat left ;
    }
    a {
      padding-right: 16px;
      height: 33px;
      display: inline-block;
      color:#fff;
      background: url(./images/to.png) no-repeat right ;
      text-decoration: none;
    }
    li:hover,
     li:hover a {
      background-image:url(./images/ao.png);
    }</code></pre>
<p>总结： </p>
<ol>
<li>a 设置 背景左侧，padding撑开合适宽度。    </li>
<li>span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。</li>
<li>之所以a包含span就是因为 整个导航都是可以点击的。</li>
</ol>
<h2 id="拓展-1"><a href="#拓展-1" class="headerlink" title="拓展@"></a>拓展@</h2><h3 id="margin负值之美"><a href="#margin负值之美" class="headerlink" title="margin负值之美"></a>margin负值之美</h3><h4 id="负边距-定位：水平垂直居中"><a href="#负边距-定位：水平垂直居中" class="headerlink" title="负边距+定位：水平垂直居中"></a>负边距+定位：水平垂直居中</h4><p>咱们前面讲过， 一个绝对定位的盒子， 利用  父级盒子的 50%，  然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。</p>
<h4 id="压住盒子相邻边框"><a href="#压住盒子相邻边框" class="headerlink" title="压住盒子相邻边框"></a>压住盒子相邻边框</h4><p><img src="http://helloxx.cn//d37.png" srcset="/myblog/img/loading.gif" alt=""></p>
<h3 id="CSS三角形之美"><a href="#CSS三角形之美" class="headerlink" title="CSS三角形之美"></a>CSS三角形之美</h3><pre><code class="css"> div {

     width: 0; 

    height: 0;
    line-height:0；
    font-size: 0;
    border-top: 10px solid red;

    border-right: 10px solid green;

    border-bottom: 10px solid blue;

    border-left: 10px solid #000; 

 }
</code></pre>
<p>一张图， 你就知道 css 三角是怎么来的了, 做法如下：</p>
<p><img src="http://helloxx.cn//d39.png" srcset="/myblog/img/loading.gif" alt=""></p>
<ol>
<li>我们用css 边框可以模拟三角效果</li>
<li>宽度高度为0</li>
<li>我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了</li>
<li>为了照顾兼容性 低版本的浏览器，加上 font-size: 0;  line-height: 0;</li>
</ol>

            </div>
            <hr>
            <div>
              <p>
                
                
              </p>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a href="https://zh.wikipedia.org/wiki/Wikipedia:CC_BY-SA_3.0%E5%8D%8F%E8%AE%AE%E6%96%87%E6%9C%AC" target="_blank" rel="nofollow noopener noopener">CC BY-SA 3.0协议</a> 。转载请注明出处！</p>
              
              
                <div class="post-prevnext row">
                  <div class="post-prev col-6">
                    
                    
                      <a href="/myblog/2019/03/10/JavaScript%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/">
                        <i class="fa fa-chevron-left"></i>
                        <span class="hidden-mobile">JavaScript基础学习笔记</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </div>
                  <div class="post-next col-6">
                    
                    
                  </div>
                </div>
              
            </div>

              
          </div>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc-start"></div>
<div id="toc">
  <p class="h5"><i class="far fa-list-alt"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a class="z-depth-1" id="scroll-top-button" href="#" role="button">
      <i class="fa fa-chevron-up scroll-top-arrow" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><b>Hexo</b></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"> <b>Fluid</b></a>
    </div>
    

    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/popper.js/1.16.1/umd/popper.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="https://cdn.staticfile.org/mdbootstrap/4.13.0/js/mdb.min.js" ></script>
<script  src="/myblog/js/main.js" ></script>


  <script  src="/myblog/js/lazyload.js" ></script>



  
  <script  src="https://cdn.staticfile.org/tocbot/4.10.0/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var navHeight = $('#navbar').height();
      var toc = $('#toc');
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;
      var tocLimMax = 2 * boardTop + boardCtn.height();

      $(window).scroll(function () {
        var tocLimMin = $('#toc-start').offset().top - navHeight;
        var scroH = document.body.scrollTop + document.documentElement.scrollTop;

        if (tocLimMin <= scroH && scroH <= tocLimMax) {
          toc.css({
            'display': 'block',
            'position': 'fixed',
            'top': navHeight,
          });
        } else if (scroH <= tocLimMin) {
          toc.css({
            'position': '',
            'top': '',
          });
        } else if (scroH > tocLimMax) {
          toc.css('display', 'none');
        }
      });
      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: '.post-content',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc > p').css('visibility', 'visible');
      }
      var offset = boardCtn.css('margin-right')
      $('#toc-ctn').css({
        'right': offset
      })
    });
  </script>





  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/myblog/js/clipboard-use.js" ></script>








<!-- Plugins -->



  <script  src="https://cdn.staticfile.org/prettify/188.0.0/prettify.min.js" ></script>
  <script>
    $(document).ready(function () {
      $('pre').addClass('prettyprint  linenums');
      prettyPrint();
    })
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "CSS学习笔记&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/myblog/js/local-search.js" ></script>
  <script>
    var path = "/myblog/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      getSearchFile(path);
      this.onclick = null
    }
  </script>



  <script defer src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <script>
    $("#post img:not(.no-zoom img, img[no-zoom])").each(
      function () {
        var element = document.createElement("a");
        $(element).attr("data-fancybox", "images");
        $(element).attr("href", $(this).attr("src"));
        $(this).wrap(element);
      }
    );
  </script>












</body>
</html>
